bulma框架的下拉式javascript
我有以下问题,我试图使用javascript和bulma框架使用两个下拉列表 但问题是,当我点击它时,只会显示一个下拉列表,但如果我点击第二个,它不会打开bulma框架的下拉式javascript,javascript,jquery,bulma,Javascript,Jquery,Bulma,我有以下问题,我试图使用javascript和bulma框架使用两个下拉列表 但问题是,当我点击它时,只会显示一个下拉列表,但如果我点击第二个,它不会打开 <div class="dropdown"> <div class="dropdown-trigger"> <button class="button" aria-haspopup="true" aria-controls
<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>
我已经分别加载了bulma和jquery库,但我仍然无法使这两个下拉列表都正常工作。您的做法是正确的,但您使用的
.querySelector()
不正确。见:
querySelector()方法返回与文档中指定的CSS选择器匹配的第一个元素
我的
解决方案是使用.querySelectorAll()
。这将返回一个包含所有下拉列表的数组。然后,您可以遍历它们并将eventlistener附加到它们
document.querySelectorAll('.dropdown').forEach(item => {
item.addEventListener('click', function(event) {
event.stopPropagation();
item.classList.toggle('is-active');
});
});
document.querySelectorAll('.dropdown').forEach(item => {
item.addEventListener('click', function(event) {
event.stopPropagation();
item.classList.toggle('is-active');
});
});