布尔玛下拉菜单未关闭问题

Question

我在我的项目中使用 bulma 下拉菜单。下拉菜单工作正常，但问题是当我在后端的多个冒号中添加下拉菜单时，当一个打开但另一个打开时，第一个没有关闭并且下拉菜单重叠。

如果从下拉打开状态 .is-active 分配一个类，当我想打开另一个下拉列表时，它不会删除以前的 .is-active 类。

我该如何解决这个问题？

enter image description here

enter image description here

$(document).ready(function() {
  // Get all dropdowns on the page that aren't hoverable.
  var dropdowns = document.querySelectorAll('.dropdown:not(.is-hoverable)');

  if (dropdowns.length > 0) {
    // For each dropdown, add event handler to open on click.
    dropdowns.forEach(function(el) {
      el.addEventListener('click', function(e) {
        if (!el.classList.contains("is-active")) {
          el.classList.toggle('is-active');
          e.stopPropagation();
          e.preventDefault();
        }
      });
    });

    // If user clicks outside dropdown, close it.
    document.addEventListener('click', function(e) {
      closeDropdowns();
    });
  }

  /*
   * Close dropdowns by removing `is-active` class.
   */
  function closeDropdowns() {
    dropdowns.forEach(function(el) {
      el.classList.remove('is-active');
    });
  }

  // Close dropdowns if ESC pressed
  document.addEventListener('keydown', function(event) {
    let e = event || window.event;
    if (e.key === 'Esc' || e.key === 'Escape') {
      closeDropdowns();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown is-right ">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu3">
      <span><strong class="fw900">. . .</strong></span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu3" role="menu">
    <div class="dropdown-content">
      <a href="javascript:void(0);" class="dropdown-item" onclick="">Sil</a>
      <hr class="dropdown-divider">
      <a href="javascript:void(0);" class="dropdown-item" onclick="">Duzenle</a>
      <hr class="dropdown-divider">
      <a href="javascript:void(0);" class="dropdown-item" onclick="">OnayDurumu</a>
    </div>
  </div>
</div>

Answer 1

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown is-right ">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu3">
      <span><strong class="fw900">. . .</strong></span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu3" role="menu">
    <div class="dropdown-content">
      <a href="javascript:void(0);" class="dropdown-item" onclick="">Sil</a>
      <hr class="dropdown-divider">
      <a href="javascript:void(0);" class="dropdown-item" onclick="">Duzenle</a>
      <hr class="dropdown-divider">
      <a href="javascript:void(0);" class="dropdown-item" onclick="">OnayDurumu</a>
    </div>
  </div>
</div>




$(document).ready(function() {
  // Get all dropdowns on the page that aren't hoverable.
  var dropdowns = document.querySelectorAll('.dropdown:not(.is-hoverable)');

  if (dropdowns.length > 0) {
    // For each dropdown, add event handler to open on click.
    dropdowns.forEach(function(el) {
      el.addEventListener('click', function(e) {
      $(".dropdown-menu").toggle();
        if (!el.classList.contains("is-active")) {
          el.classList.toggle('is-active');
          
          e.stopPropagation();
          e.preventDefault();
        }
      });
    });

    // If user clicks outside dropdown, close it.
    document.addEventListener('click', function(e) {
      closeDropdowns();
    });
  }

  /*
   * Close dropdowns by removing `is-active` class.
   */
  function closeDropdowns() {
    dropdowns.forEach(function(el) {
      el.classList.remove('is-active');
    });
  }

  // Close dropdowns if ESC pressed
  document.addEventListener('keydown', function(event) {
    let e = event || window.event;
    if (e.key === 'Esc' || e.key === 'Escape') {
      closeDropdowns();
    }
  });
});