我一直试图在有人点击下拉菜单外部时关闭下拉菜单,但我无法弄清楚。当有人在任一下拉菜单之外单击时,我需要将其关闭。我尝试了 window.onclick,但它不允许我打开任何一个下拉菜单。
这是我的 HTML:
<nav>
<ul class="menuBar">
<li><a href="index.html">Home</a></li>
<li><a href="#" onclick="menuClick('menuAccounts')">Accounts</a></li>
<ul id="menuAccounts">
<li>Savings</li>
<li>Checking</li>
</ul>
<li ><a href="#" onclick="menuClick('menuLoans')">Loans</a></li>
<ul id="menuLoans">
<li>Auto</li>
<li>Mortgage</li>
</ul>
<li><a href="about.html">About</a></li>
</ul>
</nav>
这是我的 CSS:
nav {
color: #ffffff;
background-color: #0000ff;
}
.menuBar li{
display: inline-block;
text-align: center;
}
.menuBar li a{
color: #ffffff;
text-decoration: none;
}
#menuAccounts{
display: none;
position: absolute;
background-color: #0000ff;
margin: 0 0 0 3em;
}
#menuLoans{
display: none;
position: absolute;
background-color: #0000ff;
margin: 0 0 0 6em;
}
#menuAccounts li, #menuLoans li{
display: block;
text-align: left;
padding: 0 1.5em;
}
这是我的 JavaScript:
function menuClick (x) {
var dropMenu = document.getElementById(x);
var dropAccounts = document.getElementById('menuAccounts');
var dropLoans = document.getElementById('menuLoans');
if(x === 'menuAccounts'){
if(dropMenu.style.display === "none"){
dropMenu.style.display = "block";
dropLoans.style.display = "none";
}else{
dropMenu.style.display = "none";
};
}else if(x === 'menuLoans'){
if(dropMenu.style.display === "none"){
dropMenu.style.display = "block";
dropAccounts.style.display = "none";
}else{
dropMenu.style.display = "none";
};
}else{
dropAccounts.style.display = "none";
dropLoans.style.display = "none";
};
};
最佳答案
您可以在文档上添加点击事件处理程序。如果目标元素没有 .menuBar 元素祖先(引用: .closest() ),您可以关闭菜单:
document.addEventListener('click', function(e) {
if (e.target.closest('.menuBar') == null) {
document.querySelectorAll('.menuBar ul').forEach((ele) => ele.style.display = "none");
}
});
function menuClick (x, e) {
e.preventDefault();
var dropMenu = document.getElementById(x);
var dropAccounts = document.getElementById('menuAccounts');
var dropLoans = document.getElementById('menuLoans');
if(x === 'menuAccounts'){
if(dropMenu.style.display !== "block"){
dropMenu.style.display = "block";
dropLoans.style.display = "none";
}else{
dropMenu.style.display = "none";
};
}else if(x === 'menuLoans'){
if(dropMenu.style.display !== "block"){
dropMenu.style.display = "block";
dropAccounts.style.display = "none";
}else{
dropMenu.style.display = "none";
};
}
};
nav {
color: #ffffff;
background-color: #0000ff;
}
.menuBar li{
display: inline-block;
text-align: center;
}
.menuBar li a{
color: #ffffff;
text-decoration: none;
}
#menuAccounts{
display: none;
position: absolute;
background-color: #0000ff;
margin: 0 0 0 3em;
}
#menuLoans{
display: none;
position: absolute;
background-color: #0000ff;
margin: 0 0 0 6em;
}
#menuAccounts li, #menuLoans li{
display: block;
text-align: left;
padding: 0 1.5em;
}
<nav>
<ul class="menuBar">
<li><a href="index.html">Home</a></li>
<li><a href="#" onclick="menuClick('menuAccounts', event)">Accounts</a></li>
<ul id="menuAccounts">
<li>Savings</li>
<li>Checking</li>
</ul>
<li ><a href="#" onclick="menuClick('menuLoans', event)">Loans</a></li>
<ul id="menuLoans">
<li>Auto</li>
<li>Mortgage</li>
</ul>
<li><a href="about.html">About</a></li>
</ul>
</nav>
关于javascript - 单击下拉菜单不会将其关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54206358/