Javascript 在屏幕上单击其他位置时，如何关闭侧导航？

我有以下脚本：

<script>
  function openNav() {
    document.getElementById("mySidenav").style.width = "200px";
  }

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

函数openNav（）{
document.getElementById（“mySidenav”）.style.width=“200px”；
}
函数closeNav（）{
document.getElementById（“mySidenav”）.style.width=“0”；
}

---

每次用户单击屏幕上的其他位置时，我应该实现什么使其关闭？

我也考虑过这个问题。一个基本的实现并不困难，但确保它一直工作是非常重要的

其核心思想是我们在

窗口

中添加一个

onclick

事件监听器。在该事件中，我们检查目标节点。如果目标节点不在nav容器内，则隐藏nav：

window.addEventListener("click", function (event) {
    if (contains(event.target, document.getElementById("mySidenav")) === false) {
        closeNav();
    }
});

对于奖励积分，您可以使用捕获阶段绕过使用

event.stopPropagation（）

控制事件处理的随机其他代码；停止传播意味着我们不会在泡沫阶段看到这一事件。您仍然会遇到在

onmousedown

侦听器中执行的代码问题，例如

event.preventDefault（）

；这使得

单击事件不会产生

您还需要为打开nav容器的元素添加异常。它可能会关闭导航；使用目前概述的方法，它将关闭导航，然后再次打开它。
在js文件中

 function openNav() {

document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main-menu").style.marginLeft = "250px";

   }

 function closeNav() {

document.getElementById("mySidenav").style.width = "0";
document.getElementById("main-menu").style.marginLeft = "0";

  }

function test() {

var poswitdth = document.getElementById("mySidenav");

if (poswitdth) {
    var width = poswitdth.style.width;
    if(width == "250px")
    {
        closeNav();
    }

    else {
        openNav();
       }
     }
  }

在你的html文件中

    <div id="mySidenav" class="sidenav">
      <a href="#">About </a>
      <a href="#">Services </a>
      <a href="#">Our Patners</a>
      <a href="#">Contact</a>
      <a href="#">Carreers</a>
   </div>

  <div id="main-menu">
      <i  class="fa fa-bars" aria-hidden="true"   onclick="test()">Menu</i>
 </div>


菜单

这可以帮助您
我假设侧导航在内容div之外。因此您可以对包含其余内容的div执行
…
。