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

问题描述

我的网站基于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>');

预先感谢，请忽略其余的小错误，网站仍在构建过程中。

解决方法

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

小例子：

  $(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>

---