通过单击两次来关闭菜单下拉菜单

时间:2020-03-18 09:40:18

标签: javascript html drop-down-menu dropdown



我有一些下拉菜单。实际上,无法同时打开更多下拉菜单,如果打开了下拉菜单,则当我单击另一个下拉按钮时,该下拉菜单将自行关闭。
You can see a demo here

现在的问题是,如果我在同一个下拉按钮上单击两次,则第一次单击该下拉菜单(本身应为打开),但是 第二次下拉菜单根据我的需要不会关闭本身。
此外,当下拉菜单处于打开状态并且我单击菜单上的另一个按钮时,下拉菜单也不会自行关闭。
在这里您可以看到我的代码:

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

    }

有人能够找到问题所在并解决吗?
谢谢,问候

(希望很清楚,如果没有,请在评论中让我知道。我的英语说得不太好。)

1 个答案:

答案 0 :(得分:1)

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

print(df)

   Part_Number Type_Code Building_Code Handling_Code  Price to Buy  \
0           A       1,2            XX             Y        304.32   
1           B         1            XX             Y       1282.04   
2           C     1,2,3            XX             Y         68.91   
3           D         1            XX             Y          0.00   
4           E         1            XX             Y        321.11   
5           F         2            XX             Y        194.44   

   Price to Sell           Name  
0            510          Mower  
1           5000            Saw  
2             65  Barrel (Hard)  
3            300  Barrel (Make)  
4            415   Cement Mixer  
5           1095     Cement Mix  

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

在这里摆弄您的代码,并回答有关单击以下主链接之一将其关闭的其他问题:

fiddle