菜单选择时自动关闭Toggle-nav菜单

Question

我需要帮助自动关闭手机上的toggle-nav菜单。现在，当选择菜单时它不会关闭。

HTML：

<!-- fixed header --> 
    <header id="navbar-top"> 
     <div class="pt_navbar"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-lg-12"> 
         <!-- start menu--> 
         <div id="main-nav"> 
          <a href="#" id="toggle-nav"><i class="fa fa-bars"></i> Miracle Trainer</a> 
          <ul class="pt_nav nav"> 
           <li class="active"> 
            <a href="#welcome">Welcome</a> 
           </li> 
           <li> 
            <a href="#portfolio">Training Videos</a> 
           </li> 
           <li> 
            <a href="#pricing">Pricing</a> 
           </li> 
           <li> 
            <a href="#contact">Contact</a> 
           </li> 
          </ul> 
         </div> 
         <!-- end menu--> 
        </div> 
       </div> 
      </div> 
     </div> 
    </header> 

JS：

我需要一种方法当选择一个菜单，关闭拨动导航。

$("body").on('click', '#toggle-nav', function(e){ 
     e.preventDefault(); 

     var nav_menu = $("#navbar-top .pt_navbar ul"); 

     if(nav_menu.height() < 10){ 
      nav_menu.addClass('open_menu'); 
     }else{ 
      nav_menu.removeClass('open_menu'); 
     } 
}); 

Answer 1

我目前使用此一滑出菜单：

$('.slideout-menu-toggle, .select').on('click', function(event){ 
    event.preventDefault(); 
     // create menu variables 
    var slideoutMenu = $('.slideout-menu'); 
    var slideoutMenuWidth = $('.slideout-menu').width(); 
     // toggle open class 
    slideoutMenu.toggleClass("open"); 
     // slide menu 
    if (slideoutMenu.hasClass("open")) { 
     slideoutMenu.animate({ 
     right: "0px" 
     }); 
    } else { 
     slideoutMenu.animate({ 
     right: -slideoutMenuWidth 
     }, 400); 
    } 
}); 

有些调整可能会为你工作。

编辑：在考虑到上述工作代码，我想你的第一个jQuery的线应该是这样的：

$('#toggle-nav, .select').on('click', function(e){ 

，并添加“选择”类列表项。