使用jquery隱藏側邊菜單欄

我想隱藏左側菜單欄上點擊按鈕以及點擊文檔中的任何地方。使用jquery隱藏側邊菜單欄

我試了下面的代碼，它是在下面的鏈接。

我需要一些幫助.....

這裏是試圖代碼：的Jquery：

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

來源

2014-02-12 user1853128

「以及對文檔中的任何地方的點擊。」你的意思是除了側邊欄以外的任何地方？ – Sionnach733

此功能，當用戶點擊之外將關閉菜單菜單。

$(document).click(function(e){ 

    if (!$("#menuLayout").is(e.target) && $("#menuLayout").has(e.target).length === 0) { 

      // Clicked outside, close menu 
      $("#menuLayout").removeClass('open-menu'); 

    } 

});

來源

2014-02-12 15:07:22

爲什麼使用'mouseup'？ – Itay

@itay沒有具體原因。用'click'會更好嗎？ –

非常相似，這樣的問題：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);  
});

來源

2014-02-12 15:14:12 ojovirtual

只有鏈接的答案是不鼓勵的..也有類似或重複的問題，你應該舉報。嘗試總結您提供的鏈接的要點。 – Vogel612

要關閉邊欄，當你的文檔中點擊你需要的地方放下面的函數中的邏輯。

$（document）.mouseup（function（e） { }）;

來源

2014-02-12 15:19:15 ConfusedCoder

這使您可以切換與圖像的可見性！

$("#openMenuLayout").click(function(e){ 
     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(); 
}); 


$(document).mouseup(function (e) 
{ 
    var container = $("nav#menuLayoutList"); 
    console.log(e.target.nodeName); 
    if (!container.is(e.target) 
     && container.has(e.target).length === 0 
     && e.target.nodeName != "IMG") 
    { 
     $('#menuLayout').removeClass('open-menu'); 
    } 
});

http://jsfiddle.net/WDqZ2/8/

來源

2014-02-12 15:38:57 Vygandas

或者您可以添加e.target.id！='something'而不是e.target.nodeName！=「IMG」。這將是更好的方法。 – Vygandas

使用jquery隱藏側邊菜單欄

回答

相關問題