javascript - 单击菜单外部关闭菜单

Question

我创建了一个移动菜单，单击汉堡包按钮即可打开。目前我只能通过单击汉堡按钮来关闭菜单。我需要添加什么才能通过单击页面上的其他位置来关闭菜单？

代码如下。

对基本问题表示歉意!预先感谢您的帮助。

约旦

   function myFunction() {
      var x = document.getElementById("myLinks");
      if (x.style.display === "block") {
        x.style.display = "none";
      } else {
        x.style.display = "block";
      }
    }

<div class="topnav">
    <a href="#home" class="nt"><strong>NELSON TRAILS</strong></a>
    <div id="myLinks">
    <a class="sub">SHORT WALKS</a>
    <a class="sub">DAY TRIPS</a>
    <a class="sub">MULTI-DAY</a>
    <a class="sub">MAP EXPLORER</a> 
    <a class="sub">TRAIL SEARCH AND FILTER</a>
    <a class="sub">TRAIL ALERTS</a>
    <a class="sub">ABOUT</a>
 </div>
 <a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a>
</div>

Answer 1

有很多方法，其中一种是在高级元素中使用通用 onclick 事件。 这是一个例子:

function myFunction() {
      var x = document.getElementById("myLinks");
      if (x.style.display === "block") {
        x.style.display = "none";
      } else {
        x.style.display = "block";
      }
    }
    
window.onclick = myFunction;

<div class="topnav">
    <a href="#home" class="nt"><strong>NELSON TRAILS</strong></a>
    <div id="myLinks">
    <a class="sub">SHORT WALKS</a>
    <a class="sub">DAY TRIPS</a>
    <a class="sub">MULTI-DAY</a>
    <a class="sub">MAP EXPLORER</a> 
    <a class="sub">TRAIL SEARCH AND FILTER</a>
    <a class="sub">TRAIL ALERTS</a>
    <a class="sub">ABOUT</a>
 </div>
 <a class="icon" onclick="myFunction()"><i class="fa fa-bars">Menu</i></a>
</div>

当然window不是一个好的元素，因为它污染了js命名空间。将其放在菜单上方并覆盖整个页面的元素中。 您可以使用根 div 或类似的东西。