jQuery切換導航菜單
[英]jQuery to toggle navigation menu
問題描述
我想在移動設備中打開菜單，並通過切換打開菜單列表。
我想使列表菜單在單擊切換開關時顯示，並禁用正文的滾動。 同樣，如果我再次按一下電子菜單，列表菜單將關閉，這將再次啟用主體的滾動選項。
如何做到這一點？
這是我的代碼
<body class="cbp-spmenu-push">
<div class="headerArea clearfix">
<div class="LogoArea"> <a href="#"><img src="images/smallogo.png" width="100"></a> </div>
<div class="container">
<section>
<div class="main">
<div class="toggle_menu" id="showRight">
<i></i>
<i></i>
<i></i>
</div>
</div>
</section>
</div>
<div class="menuArea">
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
<a href="#">PERUSAHAAN</a>
<a href="#">PRODUK</a>
<a href="#">INTERNASIONAL</a>
<a href="#">PELUANG BISINIS</a>
<a href="#">KARIR</a>
<a href="#">KONTAK</a>
</nav>
</div>
</div>
</body>
的CSS
.cbp-spmenu,
.cbp-spmenu-push {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
jQuery的
<script>
$(document).ready(function(e){
$('.toggle_menu').click(function(){
$('body').css("overflow","hidden")
});
});
</script>
在此jquery代碼中，當我單擊toogle菜單時，它可以很好地工作，並且它使主體不可顯示。 但是，當我單擊“ toogle”菜單並且菜單列表已關閉時，主體仍然不可滾動。
任何幫助表示贊賞。
2 個解決方案
解決方案1
3 已采納 2016-03-09 09:40:04
使用.toggleClass()添加/刪除CSS類。
您可以將css class的屬性設置為overflow : hidden並使用toggleClass ，可以添加或刪除此類
$(document).ready(function(e) { $('.toggle_menu').click(function() { $('body').toggleClass("overflow"); }); });
.cbp-spmenu, .cbp-spmenu-push { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } .overflow { overflow: hidden; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <body class="cbp-spmenu-push"> <div class="headerArea clearfix"> <div class="LogoArea"> <a href="#"> <img src="images/smallogo.png" width="100"> </a> </div> <div class="container"> <section> <div class="main"> <div class="toggle_menu" id="showRight">Click Here <i></i> <i></i> <i></i> </div> </div> </section> </div> <div class="menuArea"> <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2"> <a href="#">PERUSAHAAN</a> <a href="#">PRODUK</a> <a href="#">INTERNASIONAL</a> <a href="#">PELUANG BISINIS</a> <a href="#">KARIR</a> <a href="#">KONTAK</a> </nav> </div> </div> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </body>
解決方案2
0 2016-03-09 09:40:04
$('.toggle_menu').click(function(){
$('body').css("overflow","hidden")
});
在上面編寫的此函數中，應首先檢查toggle_menu是打開還是關閉。 然后，根據需要使身體溢出“隱藏”或“自動”。 像這樣：
$('.toggle_menu').click(function(){
if ('.toggle_menu.active') {
$('body').css("overflow","hidden");
} else {
$('body').css("overflow","auto");
}
});
響應式導航欄切換菜單 jQuery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.