单击另一个后关闭下拉列表

Question

我正在研究一个用vanilla JavaScript制作一个响应的下拉导航栏。在移动视图中，我希望在单击一个下拉菜单时，另一个下拉菜单应该关闭。JavaScript 在这里：

dropbtns.forEach(link => {
link.addEventListener("click", function(e) {
e.currentTarget.nextElementSibling.classList.toggle("showdd");
});
});

和显示下拉列表：

.showdd {
height: auto;
}

网页代码：

<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>

完整的代码可以在这里找到。

Answer 1

因此，如果您想在单击.nav-dropdown时折叠所有其他，则只需：

1. 存储当前元素.nav-dropdown的引用(供以后比较(
2. 切换其类(就像您已经做的那样(
3. 遍历 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');
});
});
});

Answer 2

在我编辑以下行后，它适用于您的代码笔。

links.forEach(link => {
link.addEventListener("click", function(e) {
links.forEach(link => {
link.nextElementSibling.classList.remove("showdd"); // Here
});
e.currentTarget.nextElementSibling.classList.toggle("show");
});
});

顺便问一下，什么是"秀"？