jQuery切换导航菜单
[英]jQuery to toggle navigation menu
问题描述
I want to make the menu in mobile that opens the list of menu with toggle. 
我想在移动设备中打开菜单，并通过切换打开菜单列表。
I want make the list menu to show up when the toggle is clicked and disable scrolling for the body. 我想使列表菜单在单击切换开关时显示，并禁用正文的滚动。 Also if I press the toogle menu again the list menu will close and this will enable the scroll option for the body again. 同样，如果我再次按一下电子菜单，列表菜单将关闭，这将再次启用主体的滚动选项。
How it is possible to do this? 如何做到这一点？
here's my code 这是我的代码
<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 的CSS
.cbp-spmenu,
.cbp-spmenu-push {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
jquery jQuery的
<script>
$(document).ready(function(e){
$('.toggle_menu').click(function(){
$('body').css("overflow","hidden")
});
});
</script>
In this jquery code , it works good when I click the toogle menu and it makes the body unscroolable. 在此jquery代码中，当我单击toogle菜单时，它可以很好地工作，并且它使主体不可显示。 But when I click the toogle menu and the menu list has been closed then the body remains unscrollable. 但是，当我单击“ toogle”菜单并且菜单列表已关闭时，主体仍然不可滚动。
Any help is appreciated. 任何帮助表示赞赏。
2 个解决方案
解决方案1
3 已采纳 2016-03-09 09:40:04
Use .toggleClass() to add/remove css class. 使用.toggleClass()添加/删除CSS类。
You can have css class with property as overflow : hidden and using toggleClass , you can add or remove this class 您可以将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")
});
In this function above that you wrote, you should check first if the toggle_menu is open or closed. 在上面编写的此函数中，应首先检查toggle_menu是打开还是关闭。 Then, make the body overflow 'hidden' or 'auto' as appropriate. 然后，根据需要使身体溢出“隐藏”或“自动”。 Something like this: 像这样：
$('.toggle_menu').click(function(){
if ('.toggle_menu.active') {
$('body').css("overflow","hidden");
} else {
$('body').css("overflow","auto");
}
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.