单击两次关闭下拉菜单

Question

我有一个带有一些下拉菜单的垂直菜单。实际上不能同时打开多个下拉菜单，而且，如果打开了一个下拉菜单，当我点击另一个下拉按钮时，下拉菜单会自行关闭。
You can see a demo here.

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

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

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

这是一个 fiddle，其中包含您的代码，并回答了您关于单击主要链接之一关闭它们的其他问题：

fiddle

单击两次关闭下拉菜单

Close menu dropdown by clicking on it twice

html

javascript

drop-down-menu

dropdown