javascript - 使用 Jquery 隐藏侧面菜单栏

Question

我试图在单击按钮以及单击文档中的任何位置时隐藏左侧菜单栏。

我尝试了以下链接中的以下代码。

我需要一些帮助......

这里是试过的代码: 查询:

$("#openMenuLayout").click(function(e){
   debugger;
    if ($('#menuLayout').hasClass('open-menu')){
       $('#menuLayout').removeClass('open-menu');
       $('#openMenuLayout').find('img').removeClass().addClass('opened_icon');
          $(this).css('display','block');
     } else {
       $('#menuLayout').addClass('open-menu');
       $('#openMenuLayout').find('img').removeClass().addClass('open-menu_icon');
       $(this).css('display','block');
     }

     e.preventDefault();
 });

Demo Link

Answer 1

与这个问题非常相似:Opening mobile menu in Chrome for Android by setting width only works first time.

这是我的解决方案:http://codepen.io/anon/pen/jiyHI

基本上，您在菜单和内容之间创建了一个可点击的层。

编辑:代码

<div id="overlay"></div>
<div id="menu-button"></div>
<div id="menu">
     <!--your menu-->    
</div>
<div id="content"></div>

CSS

#content {
  ...
  z-index:1;
}

#overlay{
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  background:rgba(0,0,0,0.3);
  z-index:5;  //between content and overlay
  display: none;
}

#menu{
     z-index:10; //greater than content and overlay
 }

Javascript

$("#menu-button").bind( "click", function() {
  $('#menu').toggleClass('open');
  $('#overlay').show(0);
});

$("#overlay").bind( "click", function() {
  $('#mobile-menu').removeClass('open');
  $('#overlay').hide(0);     
});