jquery 用于bulma框架的JavaScript

watbbzwu 于 2024-01-07 发布在 jQuery

关注(0)|答案(2)|浏览(115)

我有以下问题，我试图使用两个下拉使用JavaScript和布尔玛框架
但问题是，只有一个显示，当我点击它，但如果我点击第二个它不打开。

<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库，但是我仍然不能让两个下拉菜单都工作。

jquery

来源：https://stackoverflow.com/questions/67185585/dropdown-javascript-for-bulma-framework

2条答案

按热度按时间

1mrurvl11#

您的思路是正确的，但您使用的.querySelector()不正确。请参阅docs：
querySelector（）方法返回与文档中指定的CSS选择器匹配的第一个元素
重点是我的。
解决方案是使用.querySelectorAll()。这将返回一个包含all下拉列表的数组。然后，您可以遍历这些下拉列表，并将一个事件侦听器附加到它们。

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

字符串

赞(0）回复(0）举报 2024-01-07

arknldoa2#

@Klaassiek的答案在这里起作用，但在我的例子中，触发器内容有交互式元素，如果你点击其中任何一个，整个触发器将切换回关闭。这个微小的变化使得触发器保持可见，除非触发器元素本身再次被点击：

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

字符串

赞(0）回复(0）举报 2024-01-07

我来回答

jquery 用于bulma框架的JavaScript

2条答案

相关问题

热门标签

最新问答