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

Posted

技术标签:

【中文标题】单击文档正文中的任何位置时关闭菜单,菜单本身除外【英文标题】: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()

【讨论】:

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

以上是关于单击文档正文中的任何位置时关闭菜单,菜单本身除外的主要内容,如果未能解决你的问题,请参考以下文章

单击外部编辑器时,Angular js Summernote 下拉菜单未关闭

单击容器外部时关闭汉堡菜单

单击其他位置时关闭侧边菜单

layui垂直菜单如何单击菜单时,其他已展开的菜单自动折叠?

如果单击 DOM 中的任何位置,则隐藏 div

如果在 iOS 屏幕上点击其他任何位置,会关闭菜单?