點擊隱藏下拉菜單

Question

我使用Brad Frost的這種響應方式的resoponsive下拉模式 - 並且由於某些指向同一頁面上的錨點的鏈接，我正在尋找一種方法來強制將下拉菜單點擊時關閉，而不僅僅是鼠標移出。

模式是在這裏：這使得它的工作http://codepen.io/bradfrost/full/qwJvF

代碼是在這裏：

<script> 
$(document).ready(function() { 
    $('body').addClass('js'); 
     var $menu = $('#menu'), 
      $menulink = $('.menu-link'), 
      $menuTrigger = $('.has-subnav > a'); 

    $menulink.click(function(e) { 
     e.preventDefault(); 
     $menulink.toggleClass('active'); 
     $menu.toggleClass('active'); 
    }); 

    $menuTrigger.click(function(e) { 
     e.preventDefault(); 
     var $this = $(this); 
     $this.toggleClass('active').next('ul').toggleClass('active'); 
    }); 

    }); 

</script> 

我需要做的是採取。主動類了，的onclick。嘗試了幾種方法，但沒有一種方法是正確的。

非常感謝，

-m

Answer 1

更新

嘗試是這樣的（這是醜陋的，但適用於now..maybe以後可以解決它）：

<script> 
    $(document).ready(function() { 
     $('body').addClass('js'); 
     var $menu = $('#menu'), 
     $menulink = $('.menu-link'), 
     $menuTrigger = $('.has-subnav > a'); 
     // added to deal with the submenu level 
     $submenuTrigger = $('ul.level-2 li > a'); 

     $menulink.click(function(e) { 
     e.preventDefault(); 
     $menulink.toggleClass('active'); 
     $menu.toggleClass('active'); 
     }); 

     $menuTrigger.click(function(e) { 
     e.preventDefault(); 
     var $this = $(this); 
     $this.toggleClass('active').next('ul').toggleClass('active');   
     }); 

     // on click, hides the submenu 
     $submenuTrigger.click(function(e) { 
     e.preventDefault(); 
     $('ul.level-2').css('display','none'); 
     }); 

     // on mouseenter on the main menu, shows the submenu again 
     $menuTrigger.mouseenter(function(e) { 
     var $this = $(this); 
     if ($(this).siblings('ul').attr('class') == 'level-2') 
     { 
      $this.siblings('ul').show(); 
     } 
     }); 

     }); 
    //@ sourceURL=pen.js 
    </script>