j查询以切换导航菜单

jQuery to toggle navigation menu

本文关键字：导航 菜单 查询      更新时间：2023-09-26

我想在移动设备上制作菜单，通过切换打开菜单列表。

我希望在单击切换开关时显示列表菜单并禁用正文的滚动。此外，如果我再次按下 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菜单时，它工作得很好，它使身体变得不可思议。但是当我单击toogle菜单并且菜单列表已关闭时，正文仍然无法滚动。

任何帮助，不胜感激。

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

$('.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");
    }
});
相关文章：