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切換導航菜單

回答

相關問題