我有一些下拉菜单。实际上,无法同时打开更多下拉菜单,如果打开了下拉菜单,则当我单击另一个下拉按钮时,该下拉菜单将自行关闭。
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";
}
}
有人能够找到问题所在并解决吗?
谢谢,问候
(希望很清楚,如果没有,请在评论中让我知道。我的英语说得不太好。)
答案 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,将防止其余代码被执行。
在这里摆弄您的代码,并回答有关单击以下主链接之一将其关闭的其他问题: