クリック後に応答メニューを閉じます

Question

アイコン（#burger）をクリックして反応メニュー（＃burger-nav）を開閉する次のコードがあります。メニューオプションは同じHTMLページのアンカーにジャンプしますが、メニューは開いたままです。

オプションをクリックして応答メニューを閉じると、ユーザーがページの上部に戻るとメニューが元の状態で閉じられるようにするにはどうすればよいですか？

$(document).ready(function(){ 

// ----- Responsive menu ----- 

    (function($) { 
    /* Run this code when the #mob-nav-toggle link has been tapped or clicked */ 
    $('#burger').on('touchstart click', function(e) { 
     e.preventDefault(); 

     var $body = $('body'), 
      $page = $('#wrapper'), 
      $menu = $('#burger-nav'), 

      /* Cross browser support for CSS "transition end" event */ 
      transitionEnd = 'transitionend webkitTransitionEnd otransitionend MSTransitionEnd'; 

     /* When the toggle menu link is clicked, animation starts */ 
     $body.addClass('animating'); 

     /* Determine the direction of the animation and add the correct direction class depending on whether the menu was already visible. */ 
     if ($body.hasClass('menu-visible')) { 
     $body.addClass('up'); 
     } else { 
     $body.addClass('down'); 
     } 

     /* When the animation (technically a CSS transition) has finished, remove all animating classes and either add or remove the "menu-visible" class depending whether it was visible or not previously. */ 
     $page.on(transitionEnd, function() { 
     $body 
     .removeClass('animating down up') 
     .toggleClass('menu-visible'); 

     $page.off(transitionEnd); 
     }); 
    }); 
    })(jQuery); 

HTML：

<div id="wrapper"> 
    <header>    
     <nav id="burger-nav"> 
      <ul> 
       <li><a href="" title="">parent link</a> 
        <ul> 
         <li><a href="#bookmark" title="">link</a></li> 
         <li><a href="#bookmark" title="">link</a></li> 
         <li><a href="#bookmark" title="">link</a></li> 
         <li><a href="#bookmark" title="">link</a></li> 
        </ul> 
       </li> 
       <li><a href="" title="">parent link</a></li> 
       <li><a href="" title="">parent link</a></li> 
       <li><a href="" title="">parent link</a></li> 
      </ul> 
     </nav> 
    </header> 
</div> 

Answer 1

変更という名前の関数へのあなたの匿名のイベントハンドラ関数： あなたはそれを呼び出すことができますハンバーガーボタンをクリックしたときメニュー項目のリンク

(function ($) { 

     function menuToggle(e) { 
       e.preventDefault(); 

       var $body = $('body'), 
         $page = $('#wrapper'), 
         $menu = $('#burger-nav'), 
         /* Cross browser support for CSS "transition end" event */ 
         transitionEnd = 'transitionend webkitTransitionEnd otransitionend MSTransitionEnd'; 

       /* When the toggle menu link is clicked, animation starts */ 
       $body.addClass('animating'); 

       /* Determine the direction of the animation and add the correct direction class depending on whether the menu was already visible. */ 
       if ($body.hasClass('menu-visible')) { 
         $body.addClass('up'); 
       } else { 
         $body.addClass('down'); 
       } 

       /* When the animation (technically a CSS transition) has finished, remove all animating classes and either add or remove the "menu-visible" class depending whether it was visible or not previously. */ 
       $page.on(transitionEnd, function() { 
         $body 
           .removeClass('animating down up') 
           .toggleClass('menu-visible'); 

         $page.off(transitionEnd); 
       }); 

       $(document).ready(function() { 
         // ----- Responsive menu ----- 
         /* Run this code when the #mob-nav-toggle link has been tapped or clicked */ 
         $('#burger').on('touchstart click', menuToggle); 
         $('#burger-nav').on('touchstart click', 'a', menuToggle); 

       }); 
     }} 
)(jQuery);