javascript - 单击外部菜单后如何关闭菜单？

我想制作隐藏的侧边栏菜单，该菜单将在用户单击按钮时打开。之后，当用户单击外部菜单时，菜单将关闭。在这种情况下，如何执行此功能？

JsFiddle

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    }

    function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    }

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

最佳答案

您可以单击整个文档元素来做出反应，并找出目标是否位于菜单中：

document.documentElement.addEventListener("click", function(e){

    if (e.button != 1) // left mouse
        return;        // anything else => do nothing

    var target = e.target;
    var navItem = document.getElementById("mySidenav");
    do{
        if (target == navItem)
           return; // clicked within "mySidenav" => do nothing
        target = target.parentNode;
    }
    while(target != null);

   // react here
   closeNav(); // must be implemented somewhere
});

如果您检测到菜单中确实触发了单击，则最好不要做出任何反应，因为否则，您可能在单击被冒泡到菜单项之前关闭了菜单=>没有检测到菜单项单击。

关于javascript - 单击外部菜单后如何关闭菜单？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48745507/