单击外部关闭幻灯片菜单 Javascript答案

【问题标题】：Click Outside To close slide menu Javascript单击外部关闭幻灯片菜单 Javascript
【发布时间】：2020-02-29 05:15:18
【问题描述】：

您好，我看到了类似的问题，但没有什么可以帮助我，我有一个 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>

【问题讨论】：

标签： javascript menu slide

【解决方案1】：

您可以监听点击并检查目标在哪里，或者只是在整个页面上创建一个叠加层，并为打开的菜单使用一个类，而不是手动设置 sidenav 宽度：

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>

【讨论】：

您好，感谢您的评论，我现在将菜单链接放在哪里？我试过了，但无法让它与菜单链接一起使用。
与您在问题中所做的相同。我删除了这些以缩短答案并专注于建议的解决方案，但现在我只是对其进行了编辑以添加这些链接。

【解决方案2】：

在document 上设置一个点击事件侦听器，并在侦听器中检查实际的click 是否来自任何非菜单项。

<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="#" 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 id="open" 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";
    }
    
    let sidebar = document.getElementById("mySidenav");
    let open = document.getElementById("open");
    document.addEventListener("click", function(event){
      // If the event didn't originate from the open button or the sidebar, close it
      if(event.target !== sidebar && event.target !== open){
        closeNav();
      }
    });
    </script>

【讨论】：

我喜欢这个，但如果菜单保持打开状态会很棒，即使在点击菜单链接后，你能帮我解决它吗？
我注意到菜单仍然关闭，即使您在菜单内部单击，这就是这里的问题。