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

Posted 2023-05-08

【中文标题】单击文档正文中的任何位置时关闭菜单，菜单本身除外

【英文标题】：Close menu when clicking anywhere in the document body, except the menu itself

【发布时间】：2020-02-14 16:27:57

【问题描述】：

我有一个菜单，当用户单击图标时会打开。当用户单击页面上的其他任何位置时，我希望菜单关闭，但我无法完成该功能。以下是我的 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() 效果很好，但是当我单击菜单之外的任何地方时它会关闭菜单，这就是问题所在。有谁知道我可以如何修改我的功能来实现这一点？

【参考方案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>

【参考方案2】：

您可以在 body 上设置关闭菜单功能并在菜单本身上设置 e.stopPropagation()

【讨论】：

你能告诉我你的意思吗？我真的不明白