如何通过单击菜单外部来关闭移动菜单

Posted 2023-03-24

【中文标题】如何通过单击菜单外部来关闭移动菜单

【英文标题】：How to close mobile menu by clicking outside the menu

【发布时间】：2020-12-03 05:02:48

【问题描述】：

我的网站基于 WP 主题，网站上的主菜单是汉堡菜单。 菜单的宽度大约是屏幕宽度的 1/4（在桌面上）

我想单击屏幕提醒 3/4 中的任意位置，此单击应折叠菜单。它目前仅在我选择“X”按钮时关闭。

在此处查看网站： https://joos.app/

这里是相关的 JS 代码来实现这一点。我可以使用您的建议来添加/修改此代码以实现它

  /* Navigation Events */

  jQuery('.nav-butter.hidden_menu, .nav-butter.visible_menu').on('click', function () 
    if (jQuery(this).hasClass('active')) 
      jQuery(this).removeClass('active').parents('.site-header').find('.navigation').removeClass('active');
     else 
      jQuery(this).addClass('active').parents('.site-header').find('.navigation').addClass('active');
    
  );
  
  jQuery('.nav-butter.side_menu').on('click', function () 
    if (jQuery(this).hasClass('active')) 
      jQuery(this).removeClass('active');
      jQuery('.site-header-side-nav').removeClass('active');
     else 
      jQuery(this).addClass('active');
      jQuery('.site-header-side-nav').addClass('active');
    
  );

  jQuery('[href="#"]').on('click', function(e) 
    e.preventDefault();
  );
  
  jQuery('.side-navigation a').on('click', function (e) 
    var $el = jQuery(this),
      $parent = $el.parent();

    if ($parent.hasClass('menu-item-has-children') && !$parent.hasClass('active')) 
      e.preventDefault();

      $parent.addClass('hide active').siblings().addClass('hide');
      $el.parents('.sub-menu').addClass('opened');
    
  );
  
  jQuery('.side-navigation .sub-menu > .back').on('click', function () 
    var $el = jQuery(this);

    $el.parent().parent().removeClass('hide active').siblings().removeClass('hide');
    $el.parent().parent().removeClass('opened').parent().removeClass('opened');
  );
  
  jQuery('.side-navigation').find('.sub-menu').prepend('<li class="back free-basic-ui-elements-left-arrow"></li>');

提前致谢，请忽略其余的小错误，网站仍在构建过程中。

【问题讨论】：

请在此处添加html和css代码

【参考方案1】：

您可以在菜单后面添加一个透明层，上面有一个事件。因此，当用户单击该透明层时，菜单将关闭。

小例子：

  $(document).ready(function() 
    $("#menu-opener").click(function() 
      $(".menu-container").toggle();
    )
    
    $("#menu-layer").click(function() 
      $(".menu-container").toggle();
    )
  );

body, html 
  height: 100%;
  width: 100%;
  padding: 0px;

.menu-container 
  position: absolute;
  right: 0px;
  top: 0px;
  bottom: 0px;
  left: 0px;


#menu-layer 
  z-index:1;
  position: absolute;
  right: 0px;
  top: 0px;
  bottom: 0px;
  left: 0px;
  background-color: transparent;


.menu 
  position: absolute;
  z-index: 2;
  right: 0px;
  top: 0px;
  bottom: 0px;
  width: 100px;
  background-color: blue;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button id="menu-opener">Open menu</button>

<div class="menu-container" style="display:none">
  <div id="menu-layer">
  </div>
  <div class="menu">
    Here is the menu
  </div>
</div>

---