Question

我使用下面的代码在我的页面上显示移动菜单。我想知道以下内容：

单击菜单按钮后如何隐藏页面滚动条，然后在关闭菜单时再次滚动？

<script>
  $( document ).ready(function() {
     console.log( "ready!" );
     var mobileTrigger = $('.js-mobile-menu-trigger');
     var mobileMenu = $('.js-mobile-menu');

     mobileTrigger.on('click', function() {
         $(this).toggleClass('active');  
         mobileMenu.toggleClass('active');                     
         console.log('wat');        
     });   
  });
</script> 

 <html>
    <head></head>
    <body>

    <div class="site-header-inner">
       <button class="site-nav-trigger js-mobile-menu-trigger">
       <span class="site-nav-trigger-icon">Menu</span></button>
       <ul class="site-nav js-mobile-menu">

          <li><a class="nav-link-home"href="/">Menu</a></li>    
          <li><a class="nav-link-home"href="/">Menu</a></li>    
          <li><a class="nav-link-home"href="/">Menu</a></li>    
        </ul>
    </div>

   <div id="content">text text text text text </div>
   </body>
</html>

Answer 1

使用以下代码，它适用于您：

$('.js-mobile-menu-trigger').click(function(event) {
    event.preventDefault();
    $('body').css('overflow', 'hidden');
});

单击菜单按钮时隐藏页面滚动

1 个答案: