可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I want to make the menu in mobile that opens the list of menu with toggle.

I want make the list menu to show up when the toggle is clicked and disable scrolling for the body. Also if I press the toogle menu again the list menu will close and this will enable the scroll option for the body again.

How it is possible to do this?

here's my code

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

In this jquery code , it works good when I click the toogle menu and it makes the body unscroolable. But when I click the toogle menu and the menu list has been closed then the body remains unscrollable.

Any help is appreciated.

回答1:

Use .toggleClass() to add/remove css class.

You can have css class with property as overflow : hidden and using toggleClass, you can add or remove this class

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

In this function above that you wrote, you should check first if the toggle_menu is open or closed. Then, make the body overflow 'hidden' or 'auto' as appropriate. Something like this:

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

});