我有一个带有一些下拉菜单的垂直菜单。实际上,无法同时打开更多下拉菜单,并且,如果打开了一个下拉菜单,当我单击另一个下拉菜单按钮时,下拉菜单会自行关闭。
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";
}
}
有人能够找到问题所在并解决它吗?
谢谢,问候
(希望说得清楚,如果不清楚,请在评论中告诉我。我英语说得不太好。)
最佳答案
在 for 循环上方尝试添加:
if (itemClass.style.display === "block") {
this.nextElementSibling.style.display = "none";
this.classList.remove("active");
return;
}
这将检查单击的项目是否已打开并处理设置所有值。通过添加返回值,它将阻止其余代码的执行。
这是您的代码的摆弄,并回答有关单击主链接之一关闭它们的其他问题:
关于javascript - 单击两次关闭菜单下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60736820/