布尔玛框架的下拉 JavaScript

Question

我有以下问题，我正在尝试使用 javascript 和 bulma 框架来使用两个下拉列表

但问题是，当我点击它时，只显示一个下拉菜单，但如果我点击第二个下拉菜单，它就不会打开。

<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>Dropdown button</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item">
        Dropdown item
      </a>
      <a class="dropdown-item">
        Other dropdown item
      </a>
      <a href="#" class="dropdown-item is-active">
        Active dropdown item
      </a>
      <a href="#" class="dropdown-item">
        Other dropdown item
      </a>
      <hr class="dropdown-divider">
      <a href="#" class="dropdown-item">
        With a divider
      </a>
    </div>
  </div>
</div>

<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>Dropdown button</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item">
        Dropdown item
      </a>
      <a class="dropdown-item">
        Other dropdown item
      </a>
      <a href="#" class="dropdown-item is-active">
        Active dropdown item
      </a>
      <a href="#" class="dropdown-item">
        Other dropdown item
      </a>
      <hr class="dropdown-divider">
      <a href="#" class="dropdown-item">
        With a divider
      </a>
    </div>
  </div>
</div>

JavaScript 代码：

var dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', function(event) {
  event.stopPropagation();
  dropdown.classList.toggle('is-active');
});

我已经加载了 bulma 和 jquery 各自的库，但我仍然无法让两个下拉菜单都工作。

Answer 1

您的方向是正确的，但您使用

.querySelector()

的方式不正确。请参阅文档：

querySelector() 方法返回与文档中指定 CSS 选择器匹配的 first 元素

强调我的。

解决方案是使用

.querySelectorAll()

。这将返回一个由“所有”下拉列表组成的数组。然后您可以迭代它们并向它们附加一个事件侦听器。

document.querySelectorAll('.dropdown').forEach(item => {
    item.addEventListener('click', function(event) {
        event.stopPropagation();
        item.classList.toggle('is-active');
    });
});

Answer 2

document.querySelectorAll('.dropdown-trigger').forEach(item => {
    item.addEventListener('click', function(event) {
        event.stopPropagation();
        item.parentNode.classList.toggle('is-active');
    });
});