Javascript 单击两次关闭菜单下拉列表

我有一个带有下拉菜单的垂直菜单。实际上，不能同时打开更多的下拉列表，而且，如果某个下拉列表打开，当我单击另一个下拉按钮时，该下拉列表会自动关闭。
.

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

<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'）；
对于（i=0；i

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

---

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

在您的for循环上方尝试添加：

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

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

以下是您的代码，并回答了您关于单击其中一个主要链接关闭代码的其他问题：

---

答案不错，很有效！如果我点击一个按钮（一个“普通”按钮，而不是下拉按钮），下拉按钮会自动关闭，你也能做到吗？谢谢你说的折叠按钮是什么意思？不完全是。如果您看到演示，想象下拉列表是打开的，然后单击About/Services/Client/。。。按钮我希望当你点击这些按钮（关于、服务等，而不是“下拉菜单”按钮）时，下拉菜单崩溃。我希望我的解释是清楚的，我觉得你在寻找什么。简直太完美了！非常感谢你！

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