jQuery切换导航菜单

我想在移动设备上打开菜单列表的切换。jQuery切换导航菜单

我想让列表菜单在点击切换时显示并禁用正文的滚动。另外，如果我再次按下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>

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菜单它的工作好，而且使人体unscroolable 。但是，当我点击toogle菜单并且菜单列表已关闭时，主体仍然无法滚动。

任何帮助表示赞赏。

来源

2016-03-09 vicario

使用.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>

来源

2016-03-09 09:40:04 Rayon

wooowww它的作品像魔术！谢谢siir〜 – vicario

$('.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"); 
    } 

});

来源

2016-03-09 09:40:04 TKoL

jQuery切换导航菜单

回答

相关问题