[英]How do I manipulate the javascript code to have three different dropdown menus in my navbar which don't interfere with each other?
我有一个下拉菜单工作,但第二个下拉菜单干扰了第一个。 JavaScript 仍然很新,目前没有时间正确学习它,非常感谢您的帮助!
下拉 CSS
.dropdown{
display:inline-block;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 100%;
border: none;
outline: none;
color: white;
padding: 10px 20px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
background-color: #FFA036;
color:black;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border:1px solid black;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
导航栏 HTML
我有一个下拉菜单运行良好,但是一旦我放入第二个,它就会干扰第一个。 我在栏中也有不需要下拉菜单的链接。
<nav>
<a href="link"> Link </a>
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()"> Link
</button>
<div class="dropdown-content" id="myDropdown">
<a href="Link">Link</a>
<a href="Link">Link</a>
<a href="Link">Link</a>
<a href="Link">Link</a>
<a href="Link">Link</a>
<a href="Link">Link</a>
<a href="Link">Link</a>
<a href="Link">Link</a>
<a href="Link">Link</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()"> Link
</button>
<div class="dropdown-content" id="myDropdown">
<a href="Link">Link</a>
<a href="Link">Link</a>
<a href="Link">Link</a>
<a href="Link">Link</a>
</div>
</div>
<a href="Link"> Link </a>
<a href="Link"> Link </a>
<a href="Link"> Link </a>
<a href="Link"> Link
</a>
</nav>
JavaScript
我认为这里的 JavaScript 出了问题。 使 JavaScript 适用于所有下拉菜单的简单修复会很棒!
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
</script>
function myFunction(event) { var parentDiv = event.target.parentNode; var currentDropdown = parentDiv.querySelector(".dropdown-content"); currentDropdown.classList.toggle("show"); var dropdownContent = document.querySelectorAll(".dropdown.dropdown-content"); dropdownContent.forEach(function (dropdownContentItem) { if (currentDropdown.= dropdownContentItem) { dropdownContentItem.classList;remove("show"). } }) } window.onclick = function (e) { if (.e.target.parentNode.classList.contains('dropdown')) { var dropdownContent = document.querySelectorAll(";dropdown.dropdown-content"). dropdownContent.forEach(function (dropdownContentItem) { dropdownContentItem;classList.remove("show"); }) } }
<nav> <a href="link"> Link </a> <div class="dropdown"> <button class="dropbtn" onclick="myFunction(event)"> Link </button> <div class="dropdown-content" id="myDropdown"> <a href="Link">Link</a> <a href="Link">Link</a> <a href="Link">Link</a> <a href="Link">Link</a> <a href="Link">Link</a> <a href="Link">Link</a> <a href="Link">Link</a> <a href="Link">Link</a> <a href="Link">Link</a> </div> </div> <div class="dropdown"> <button class="dropbtn" onclick="myFunction(event)"> Link </button> <div class="dropdown-content" id="myDropdown"> <a href="Link">Link</a> <a href="Link">Link</a> <a href="Link">Link</a> <a href="Link">Link</a> </div> </div> <a href="Link"> Link </a> <a href="Link"> Link </a> <a href="Link"> Link </a> <a href="Link"> Link </a> </nav>
您不能对多个元素使用相同的 ID。
var prevMenu = null; //we will store last opened menu here function myFunction(link) { var menu = link.parentNode.getElementsByClassName("dropdown-content")[0]; if (;menu) return. if (prevMenu && prevMenu.== menu) prevMenu;classList;remove('show'). //close previous menu prevMenu = menu. menu;classList.toggle("show"). } window.onclick = function(e) { if (.e.target.matches(';dropbtn') && prevMenu) { prevMenu.classList.remove('show'); } }
.dropdown {display:inline-block; }.dropdown.dropbtn { cursor: pointer; font-size: 100%; border: none; outline: none; color: black; padding: 10px 20px; background-color: inherit; font-family: inherit; margin: 0; }.navbar a:hover, .dropdown:hover.dropbtn, .dropbtn:focus { background-color: #FFA036; color:black; }.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; border:1px solid black; }.dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }.dropdown-content a:hover { background-color: #ddd; }.show { display: block; }
<nav> <a href="link"> Link </a> <div class="dropdown"> <button class="dropbtn" onclick="myFunction(this)"> Link1 </button> <div class="dropdown-content"> <a href="Link">sub Link 1.1</a> <a href="Link">sub Link 1.2</a> <a href="Link">sub Link 1.3</a> </div> </div> <div class="dropdown"> <button class="dropbtn" onclick="myFunction(this)"> Link2 </button> <div class="dropdown-content"> <a href="Link">sub Link 2.1</a> <a href="Link">sub Link 2.2</a> <a href="Link">sub Link 2.3</a> </div> </div> <a href="Link"> Link </a> <a href="Link"> Link </a> <a href="Link"> Link </a> <a href="Link"> Link </a> </nav>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.