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.
如何做到这一点?
这是我的代码
<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"菜单并且菜单列表已关闭时，主体仍然无法滚动.
In this jquery code , it works good when I click the toogle menu and it makes the body unscroolable. But when I click the toogle menu and the menu list has been closed then the body remains unscrollable.
感谢您的帮助.
推荐答案
使用 .toggleClass() 添加/删除CSS类.
Use .toggleClass() to add/remove css class.
您可以拥有css class，其属性为overflow : hidden，并使用toggleClass，可以添加或删除此类
You can have css class with property as overflow : hidden and using toggleClass, you can add or remove this class
$(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>
这篇关于jQuery切换导航菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
