![](/img/trans.png)
[英]vertical drop down menu displays sub menu and when clicking on another menu item closes the previous menu item
[英]Vertical drop down menu closes too quick
我有一个简单的带有子菜单的垂直下拉菜单,但是这个让我很头疼。 当我单击父菜单(下拉页面2)时,我要加载相应的页面并打开子菜单。 当我单击子菜单中的任何项目时,我想加载相应的页面并使子菜单保持打开状态。 当我单击子菜单父项或另一个父项(开始或第1页)时,我想加载相应的页面并关闭子菜单。 使用当前代码,子菜单始终会立即关闭。
jsfiddle在这里: https ://jsfiddle.net/bj1d17c5/
码:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="screen.css"/>
</head>
<body>
<div class="sidenav">
<a href="test.html">Start</a>
<a href="test.html">Page1</a>
<a href="test.html" class="dropdown-btn">Dropdown Page2</a>
<div class="dropdown-container">
<a href="#">Page 2.1</a>
<a href="#">Page 2.2</a>
<a href="#">Page 2.3</a>
</div>
</div>
<div class="main">
<h2>Sidebar Dropdown</h2>
<p>Click on the dropdown button to open the dropdown menu inside the side navigation.</p>
<p>This sidebar is of full height (100%) and always shown.</p>
<p>Some random text..</p>
</div>
<script>
/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
</script>
</body>
</html>
我不是很好,但这不是因为您使用href来“ test.html”吗? 尝试以下操作: <a href="#" class="dropdown-btn">Dropdown Page2</a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.