【问题标题】：How to close dropdown menu when user clicks用户点击时如何关闭下拉菜单
【发布时间】：2020-07-21 22:47:34
【问题描述】：

我正在使用可点击的下拉菜单进行导航。下拉列表使用输入标签。我遇到困难的地方是，如果访问者单击页面上的其他位置，我需要关闭下拉菜单。我正在尝试使用目标属性、matches() 方法和 onclick 事件。

我在控制台中注意到的是，当我打开下拉菜单时，两个条件语句都会出现并且下拉菜单不会打开。就好像下拉菜单同时打开和关闭一样。

我做错了什么以及如何使其正常运行，以便用户可以简单地打开下拉菜单并在点击网页上的其他位置时将其关闭？

提前致谢！下面是代码。这是代码笔：https://codepen.io/bfoley650/pen/NWxeXRB?editors=1111

HTML

<div class="dropdown">
    <input id="checkId" type="checkbox" name="menu" />
    <label for="checkId">
         <span class="heyhey">⋮</span>
    </label> 
    <div class="dropdown-content">
      <ul class="heyheyhey">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
 
      </ul>
    </div>  
</div>

CSS

span {
  color: black;
  font-size: 24px;
  margin: 0 15px;
}

li {
  list-style-type: none;
}

.dropdown {
  float: left;
  overflow: hidden;
  font-size: 17px;
  border: none; 
  outline: none; 
  color: white;
  background-color: inherit;
  font-family: inherit; 
  margin: 10px 0; 
}
 
.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 20px 12px 0;
  text-decoration: none;
  display: block;
  text-align: left;
}

input {
  display: none;
}

label {
  position: relative;
  cursor: pointer;
}


input:checked~.dropdown-content {
  display: block;
}

let el = document.querySelector(".dropdown-content"); 

window.onclick = function(e) {
      if (e.target.matches(".heyhey")) {
        console.log("You clicked the dropdown menu");
      } else {
        console.log("You clicked somewhere else");
        el.style.display = "none";
      }
    }

【问题讨论】：

标签： javascript css navigation

【解决方案1】：

代码：

window.onclick = function(e) {
    if (e.target.matches(".heyhey")) {
        console.log("You clicked the dropdown menu");
        el.style.display = "block"; // Shows the element
        e.preventDefault(); // Prevents propagation
    } else {
        console.log("You clicked somewhere else");
        el.style.display = "none";
    }
}

.preventDefault

event.preventDefault 停止传播，JS 默认为父元素调用onclick，这将停止你的onclick 处理程序的重复计算。

el.style.display = "块";

这会将display 样式从无更改，从而显示元素。这可以更改为除none 之外的任何其他显示样式。

【讨论】：

非常感谢！
嗨@Elias，如果我点击离开下拉菜单，下拉菜单会关闭。但是，如果下拉菜单打开，如果我单击三点省略号，它不会关闭。如何调整代码以包含省略号以关闭打开的下拉菜单？ codepen.io/bfoley650/pen/NWxeXRB?editors=1101
@bfoley_teamug 最简单的方法是使用一个变量来保存状态，如下所示：let el = document.querySelector(".dropdown-content"); let opened = false; window.onclick = function(e) { if (e.target.matches(".heyhey") && !opened) { console.log("You clicked the dropdown menu"); el.style.display = "block"; // Shows the element opened = !opened; e.preventDefault(); // Prevents propagation } else { opened = false; console.log("You clicked somewhere else"); el.style.display = "none"; } }

【解决方案2】：

我认为您应该将跨度移到标签上方：

<span class="heyhey">⋮</span>
<label for="checkId">
    <input id="checkId" type="checkbox" name="menu" />
</label>

并将以下代码添加到您的条件中：

console.log("You clicked the dropdown menu");
el.style.display = "block";

【讨论】：