单击两次以关闭下拉菜单

Question

我有一个带有下拉菜单的垂直菜单。实际上，不能同时打开更多的下拉列表，如果打开了下拉列表，当我单击另一个下拉按钮时，下拉列表会自行关闭
您可以在此处看到演示

现在的问题是，如果我在同一个下拉按钮上单击两次，第一次单击下拉按钮会打开(应该是这样(，但第二次下拉按钮不会按我的意愿关闭
此外，当下拉列表打开并且我单击菜单上的另一个按钮时，下拉列表不会自行关闭
在这里你可以看到我的代码：

<div class="sidenav">
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#clients">Clients</a>
<a href="#contact">Contact</a>
<button class="dropdown-btn">Dropdown 
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<button class="dropdown-btn">Dropdown 
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<a href="#contact">Search</a>
</div>

---

var accItem = document.getElementsByClassName('dropdown-container');
var accHD = document.getElementsByClassName('dropdown-btn');
for (i = 0; i < accHD.length; i++) {
accHD[i].addEventListener('click', toggleItem, false);
}
function toggleItem() {
var itemClass = this.nextElementSibling;
for (i = 0; i < accItem.length; i++) {
accItem[i].style.display = "none";
accHD[i].classList.remove("active");
}
if (itemClass.style.display === "none") {
this.classList.add("active");
//this.classList.toggle("active");
this.nextElementSibling.style.display = "block";
}
}

有人能找到问题所在并解决它吗
谢谢，问候

(希望清楚，如果不清楚，请在评论中告诉我。我英语说得不太好。(

Answer 1

在for循环上方尝试添加：

if (itemClass.style.display === "block") {
this.nextElementSibling.style.display = "none";
this.classList.remove("active");
return;
}

这将检查单击的项目是否已打开，并处理所有值的设置。通过添加返回，它将阻止代码的其余部分被执行。

这里有一个摆弄你的代码，并回答你关于点击其中一个主要链接关闭它们的另一个问题：

小提琴