javascript - 单击文档正文中的任意位置时关闭菜单，菜单本身除外

Question

我有一个菜单，当用户单击该图标时会打开该菜单。当用户单击页面上的其他任何位置时，我希望菜单关闭，但我无法完成该功能。下面是我的 html 和函数:

    <div id="header">
      <div id="menu">
        <div class="menu-container" id="myLinks">
          <?php wp_nav_menu(array('container_class' => 'hike-menu', 'theme_location' => 'home-top')); ?>
          <?php wp_nav_menu(array('container_class' => 'hike-menu', 'theme_location' => 'hike')); ?>
          <?php wp_nav_menu(array('container_class' => 'primary-menu', 'theme_location' => 'primary')); ?>
        </div>
        <a href="javascript:void(0);" class="icon" onclick="myToggleFunction()" id="toggle-menu">
          <span></span>
        </a>
      </div>
    </div>

    function myToggleFunction() {
      var element = document.getElementById("toggle-menu");
      element.classList.add("active");
      var x = document.getElementById("myLinks");
      if (x.style.width === "290px") {
        x.style.width = "0px";
        element.classList.remove("active");
      } else {
        x.style.width = "290px";
      }
    }

    jQuery(document.body).click(function(e) {
      if (jQuery("#toggle-menu").hasClass("active") && jQuery("#myLinks").css("width", "290px")) {
        jQuery("#myLinks").css("width", "0px");
        jQuery("#toggle-menu").removeClass("active");
      }
    });

当用户点击“toggle-menu”时，菜单打开。 myToggleFunction() 工作得很好，但是当我单击它之外的任何地方时它会关闭菜单，这就是问题所在。有谁知道我如何修改我的功能来实现这一点？

Answer 1

检查 event.target 以确定菜单是否应该关闭。

$(function() {
  $("html").on("click", function(e) {
    let $t = $(e.target),
      $myLinks = $("#myLinks"),
      $toggleMenu = $("#toggle-menu");
    if ($t.is($myLinks) || $myLinks.has($t).length) {
      //clicked in the menu. do nothing
    } else if ($t.is($toggleMenu) || $toggleMenu.has($t).length) {
      $myLinks.toggleClass("open");
    } else {
      $myLinks.removeClass("open");
    }
  })
});

html,
body {
  margin: 0;
  min-height: 100%;
  background: #eee;
}

#myLinks {
  background: #ccc;
  max-height: 0px;
  height:auto;
  overflow: hidden;
  transition: max-height 0.4s;
}

#myLinks.open {
  max-height: 200px;
}

#myLinks a {
  display: block;
  margin: 10px;
}

#toggle-menu {
  background: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
  <div id="menu">
    <div class="menu-container" id="myLinks">
      <a href="#">menu</a>
      <a href="#">items</a>
      <a href="#">here</a>
    </div>
    <a href="#" class="icon" id="toggle-menu">
      <span>toggle menu</span>
    </a>
  </div>
</div>