Question

我一直试图在有人单击它时关闭该下拉列表，但我无法弄清楚。当有人从任一下拉菜单中单击时，我需要关闭它。我尝试了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";
  };
};

Answer 1

您可以在文档上添加click事件处理程序。如果目标元素没有 .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>

Answer 2

有几种方法可以做到这一点。一种方法是像这样在链接的onBlur上监听

<a href="#" onBlur="onBlur('menuLoans')" onclick="menuClick('menuLoans')">
function onBlur(x) {
//hide your popup here
}

另一种方法是添加一个具有透明背景的叠加层，然后听其单击以关闭弹出窗口
第三种方法是侦听来自文档的点击，如果targetElement不是您的其中之一，则将其关闭

从下拉菜单中单击不会关闭它

2 个答案: