如何在用户单击时关闭下拉菜单

Question

我正在使用可点击的下拉菜单进行导航。下拉列表使用输入标记。我陷入困境的地方是，如果访问者单击页面上的其他地方，我需要关闭下拉列表。我正在尝试使用目标属性、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;
}

JS

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";
      }
    } 

Answer 1

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

<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";

Answer 2

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停止传播，JS默认调用父元素的onclick，这将停止对onclick处理程序的重复计数。

这将更改show样式，从而显示元素。这可以更改为任何其他显示样式，除了no。