javascript - 单击外部关闭滑动菜单 Javascript

您好，我看到类似的问题，但没有什么可以帮助我，我有一个 javascript 菜单，我想单击菜单外部来关闭它，现在，您必须单击 X 来关闭菜单，我希望能够单击页面上菜单外部的任意位置来关闭菜单菜单。

<head>
<style>
.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;
    }
    
    @media screen and (max-height: 450px) {
      .sidenav {padding-top: 15px;}
      .sidenav a {font-size: 18px;}
    }
    </style>
    </head>
    <body>
    
    <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>
    
    <h2>Animated Sidenav Example</h2>
    <p>Click on the element below to open the side navigation menu.</p>
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
    
    <script>
    function openNav() {
      document.getElementById("mySidenav").style.width = "250px";
    }
    
    function closeNav() {
      document.getElementById("mySidenav").style.width = "0";
    }
    </script>

最佳答案

您可以监听点击并检查目标在哪里，或者只是在整个页面上创建一个覆盖层，并使用打开菜单的类，而不是手动设置侧边导航宽度:

function openNav() {
  document.body.classList.add('sidenav-open');
}

function closeNav() {
  document.body.classList.remove('sidenav-open');
}

/* Same as you */.sidenav{height:100%;width:0;position:fixed;z-index:1;top:0;left:0;background-color:#111;overflow-x:hidden;transition:.5s;padding-top:60px}.sidenav a{padding:8px 8px 8px 32px;text-decoration:none;font-size:25px;color:#818181;display:block;transition:.3s}.sidenav a:hover{color:#f1f1f1}.sidenav .closebtn{position:absolute;top:0;right:25px;font-size:36px;margin-left:50px}@media screen and (max-height:450px){.sidenav{padding-top:15px}.sidenav a{font-size:18px}}

#sidenav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: rgba(0, 0, 0, .1);
  cursor: pointer;
  z-index: 1;
}
.sidenav-open .sidenav { width: 250px; }
.sidenav-open #sidenav-overlay { width: 100%; }

<div id="sidenav-overlay" onclick="closeNav()"></div>
<div id="mySidenav" class="sidenav">
  <a href="#" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

关于javascript - 单击外部关闭滑动菜单 Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58684100/

javascript - 单击外部关闭滑动菜单 Javascript

上一篇：javascript - 请求 API 时 View 中看不到任何数据

下一篇：javascript - 如何将 EST 中的日期字符串与 UTC 中的日期对象进行比较？