单击div外部时如何关闭菜单？

Question

我希望能够在用户点击外部时关闭弹出菜单。我怎样才能在纯JS中实现这个目标？

以下是我目前正在使用的代码：

function list(){
	var r= document.getElementById('l2');
	if (r.style.height==="0px"){
            r.style.height="500px"  
        } else {
            r.style.height="0px";}
}

#logo-menu img {
  width: 4vw;
  height: 2.79vw;
  border-radius: 3px;
  border: 0px solid rgba(0, 0, 0, 0.5);
  transition: 0.3s;
  z-index: 3;
  margin: 0% 0% 0% 0%;
  position: relative;
  top: 0.0vw;
  background: rgba(230, 230, 230, 1);
}

#logo-menu img:hover {
  filter: invert(100%);
}

#logo-menu img:active {
  filter: saturate(20);
  transform: scale3d(1.01, 1.01, 1.01);
}

#l2 {
  margin: -0.17% 0% 0% 0%;
}

#l2 ul {
  width: 100%;
  height: auto;
  list-style-type: none;
  padding: 0px 0px 4% 0px;
  overflow: auto;
}

#l2 li a {
  width: 20.7vw;
  height: auto;
  line-height: 1.2;
  font-weight: bold;
  font-size: 0.8vw;
  word-break: break-word;
  text-align: left;
  color: black;
  text-decoration: none;
  background: rgba(255, 255, 255, 1);
  display: block;
  margin: 3.5% 0% -2% 1.5%;
  padding: 1.5% 0% 2% 0%;
  overflow: hidden;
  border-radius: 5px;
  float: left;
  position: relative;
  left: 4%;
}

#l2 p {
  width: 100%;
  height: auto;
  position: relative;
  left: 2%;
  top: 0.5vw;
}

#l2 img {
  width: 3.5vw;
  height: 3.4vw;
  float: left;
  margin: 0.5% 0% 0% 1%;
  border-radius: 5px;
  background: rgba(255, 255, 255, 1);
}

#l2 li:hover>a {
  background: rgba(0, 0, 0, 1);
  color: white;
}

#l2 li a:hover img {
  filter: invert(100%);
}

#l2 li:active>a {
  background: rgba(20, 20, 20, 1);
  color: white;
}

.dropdown-content {
  background: rgba(235, 235, 235, 1);
  overflow: auto;
  width: 100%;
  float: left;
  height: 0px;
}

<div id="logo-menu"><img src="https://png.icons8.com/metro/1600/star.png" onclick="list()" class="dropbtn" /></div>
<div id="l2" class="dropdown-content">
  <ul>
    <li>
      <a href="list.html"><img src="pic1.png" />
        <p>list item 1</p>

      </a>
    </li>
    <li>
      <a href="list.html"><img src="pic2.png" />
        <p>list item 2</p>
      </a>
    </li>

    <li>
      <a href="list.html"><img src="pic3.png" />
        <p>list item 3</p>

      </a>
    </li>
    <li>
      <a href="list.html"><img src="pic4.png" />
        <p>list item 3</p>
      </a>
    </li>
    <li>
      <a href="list.html"> <img src="pic5.png">
        <p>list item 4</p>
      </a>
    </li>
    <li>
      <a href="list.html"> <img src="pic6 .png">
        <p>list item 5</p>
      </a>
    </li>
    <li>
      <a href="list.html"><img src="pic7 .png">
        <p>list item 6</p>

      </a>
    </li>
    <li>
      <a href="list.html"><img src="pic8 .png">
        <p>list item 7</p>

      </a>
    </li>
    <li>
      <a href="list.html"><img src="pic9 .png">
        <p>list item 8</p>

      </a>
    </li>
    <li>
      <a href="list.html"><img src="pic10 .png">
        <p>list item 9</p>

      </a>
    </li>
  </ul>
</div>

Answer 1

您可以尝试 window.addEventListener 。我假设div之外意味着l2＆amp; logo-menu div。以下代码的希望可以帮助您。

window.addEventListener('click', function(e){
    if (!document.getElementById('l2').contains(e.target) && (!document.getElementById('logo-menu').contains(e.target))){
    alert("Clicked outside l2 and logo-menu");
     document.getElementById('l2').style.height="0px"; //the same code you've used to hide the menu
  } 
})

Answer 2

您可以使用

document.getElementById(id).style.visibility = "hidden";
document.getElementById(id).style.visibility = "visible";

在你的功能中，而不是设置px高度。

Answer 3

这对我有用

window.addEventListener('mouseup', function(e) {
    var x = document.querySelector('#mylinks');
    if (event.target != document.querySelector(".icon")) {
        x.style.display = "none";
    }
});

#mylinks具有单击.icon

时要显示的内容

我使用style.display来显示或隐藏内容。