单击屏幕上的其他地方时如何关闭侧面导航

Question

我有以下脚本：

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

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

Answer 1

我也考虑过这个问题。基本实现并不难，但确保它始终有效。

核心思想是我们向window添加一个onclick事件侦听器。在该事件侦听器中，我们检查目标节点。如果目标节点不在 nav 容器中，我们隐藏 nav：

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

对于奖励积分，您可以使用捕获阶段来规避使用event.stopPropagation()来控制事件处理的随机其他代码; stopPropagation意味着我们不会在气泡阶段看到事件。例如，在onmousedown侦听器中event.preventDefault()的代码仍然会遇到问题;这使得click事件不会生成。

您还需要为打开导航容器的元素添加例外。它可能应该关闭导航;使用到目前为止概述的方法，它将关闭导航，然后再次打开它。

Answer 2

在你的

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>

这可以帮助您