Question

我有以下脚本：

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

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

每次用户点击屏幕上的其他位置时，我应该实施什么才能让它关闭？

Answer 1

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

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

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

对于奖励积分，您可以使用捕获阶段绕过使用event.stopPropagation()来控制事件处理的随机其他代码; stopPropagation意味着我们不会在泡沫阶段看到事件。在event.preventDefault()侦听器中，例如onmousedown的代码仍会遇到问题;这使得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>

这可以帮到你

如何在点击屏幕上的其他位置时关闭侧面导航？

2 个答案: