jQuery切换导航菜单答案

【问题标题】：jQuery to toggle navigation menujQuery切换导航菜单
【发布时间】：2016-03-09 09:35:27
【问题描述】：

我想在移动设备中制作菜单，用切换打开菜单列表。

我希望在单击切换按钮时显示列表菜单并禁用正文的滚动。此外，如果我再次按下工具菜单，列表菜单将关闭，这将再次启用正文的滚动选项。

怎么可能做到这一点？

这是我的代码

<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 代码中，当我单击工具菜单时它工作得很好，它使正文无法滚动。但是当我单击工具菜单并且菜单列表已关闭时，主体仍然无法滚动。

感谢任何帮助。

【问题讨论】：

标签： javascript jquery html css scroll

【解决方案1】：

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

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

});

【讨论】：