我正在使用普通 JavaScript 制作一个响应式下拉导航栏。在移动 View 中,我希望单击一个下拉列表后,另一个下拉列表应该关闭。 JavaScript 在这里:
dropbtns.forEach(link => {
link.addEventListener("click", function(e) {
e.currentTarget.nextElementSibling.classList.toggle("showdd");
});
});
并显示下拉菜单:
.showdd {
height: auto;
}
html代码:
<div class="nav-container">
<div class="brand">
<a href="#!">Logo</a>
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul id="nav-list">
<li>
<a href="#!">Home</a>
</li>
<li>
<a href="#!">About</a>
</li>
<li class="dropdown">
<a href="#!" class='dropbtn'>Services <i class="fas fa-sort-down"></i></a>
<ul class="nav-dropdown">
<li>
<a href="#!">Web Design</a>
</li>
<li>
<a href="#!">Web Development</a>
</li>
<li>
<a href="#!">Graphic Design</a>
</li>
</ul>
</li>
<li>
<a href="#!">Pricing</a>
</li>
<li class="dropdown">
<a href="#!" class='dropbtn'>Portfolio <i class="fas fa-sort-down"></i></a>
<ul class="nav-dropdown">
<li>
<a href="#!">Web Design</a>
</li>
<li>
<a href="#!">Web Development</a>
</li>
<li>
<a href="#!">Graphic Design</a>
</li>
</ul>
</li>
<li>
<a href="#!">Contact</a>
</li>
</ul>
</nav>
</div>
完整代码可见here .
最佳答案
因此,如果您想在点击其中一个 .nav-dropdown
时折叠所有其他 .nav-dropdown
,您只需要:
- 存储当前元素的
.nav-dropdown
的引用(以供稍后比较) - 切换其类别(就像您已经在做的那样)
- 遍历 DOM 树中的所有其他
.nav-dropdown
并迭代它们。如果它们与当前引用不匹配,那么您就知道该下拉列表属于另一个链接,您可以删除该类
考虑到这一点,我们得出以下代码:
dropbtns.forEach(link => {
link.addEventListener('click', e => {
const ownDropdown = e.currentTarget.nextElementSibling;
ownDropdown.classList.toggle('showdd');
document.querySelectorAll('.dropbtn + .nav-dropdown').forEach(el => {
if (el !== ownDropdown)
el.classList.remove('showdd');
});
});
});
关于javascript - 单击另一个关闭下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60221891/