点击隐藏下拉菜单

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>