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.