Javascript jQuery切换导航菜单_Javascript_Jquery_Html_Css_Scroll

Javascript jQuery切换导航菜单

javascript jquery html css scroll

Javascript jQuery切换导航菜单,javascript,jquery,html,css,scroll,Javascript,Jquery,Html,Css,Scroll,我想在手机中制作菜单，用切换键打开菜单列表我想让列表菜单显示时，切换点击和禁用滚动的机构。此外，如果我再次按下toogle菜单，列表菜单将关闭，这将再次启用主体的滚动选项这怎么可能呢这是我的密码 <body class="cbp-spmenu-push"> <div class="headerArea clearfix"> <div class="LogoArea"> <a href="#"><img src="images/sma

我想在手机中制作菜单，用切换键打开菜单列表

我想让列表菜单显示时，切换点击和禁用滚动的机构。此外，如果我再次按下toogle菜单，列表菜单将关闭，这将再次启用主体的滚动选项

这怎么可能呢

这是我的密码

<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>

jquery

<script>
    $(document).ready(function(e){
        $('.toggle_menu').click(function(){
            $('body').css("overflow","hidden")
        });
    });
</script>


$（文档）.ready（函数（e）{
$（'.toggle_menu'）。单击（函数（）{
$（'body'）.css（“溢出”、“隐藏”）
});
});

在这个jquery代码中，当我单击toogle菜单时，它工作得很好，它使主体不可冷却。但是当我点击toogle菜单，菜单列表被关闭时，主体仍然是可展开的

非常感谢您的帮助。

用于添加/删除css类

您可以使用属性为

overflow:hidden

的

css类

，并使用

toggleClass

，可以添加或删除此类

$（文档）.ready（函数（e）{
$（'.toggle_menu'）。单击（函数（）{
$（'body'）.toggleClass（“溢出”）；
});
});
.cbp spmenu，
.cbp SPP菜单推送{
-webkit过渡：所有0.3秒轻松；
-moz转换：所有0.3秒轻松；
过渡：所有0.3秒缓解；
}
.溢出{
溢出：隐藏；
}

点击这里
















































































用于添加/删除css类
您可以使用属性为overflow:hidden
的css类
，并使用toggleClass
，可以添加或删除此类

$（文档）.ready（函数（e）{
$（'.toggle_menu'）。单击（函数（）{
$（'body'）.toggleClass（“溢出”）；
});
});
.cbp spmenu，
.cbp SPP菜单推送{
-webkit过渡：所有0.3秒轻松；
-moz转换：所有0.3秒轻松；
过渡：所有0.3秒缓解；
}
.溢出{
溢出：隐藏；
}

点击这里

















































































在您编写的上述函数中，您应该首先检查toggle_菜单是打开还是关闭的。然后，根据需要使主体溢出“隐藏”或“自动”。大概是这样的：
$('.toggle_menu').click(function(){
    if ('.toggle_menu.active') {
         $('body').css("overflow","hidden");
    } else {
         $('body').css("overflow","auto");
    }

});

在您编写的上述函数中，您应该首先检查toggle_菜单是打开还是关闭的。然后，根据需要使主体溢出“隐藏”或“自动”。大概是这样的：
$('.toggle_menu').click(function(){
    if ('.toggle_menu.active') {
         $('body').css("overflow","hidden");
    } else {
         $('body').css("overflow","auto");
    }

});

$('.toggle_menu').click(function(){
    if ('.toggle_menu.active') {
         $('body').css("overflow","hidden");
    } else {
         $('body').css("overflow","auto");
    }

});