1

我正在使用 Brad Frost 的 This Is Responsive 中的响应式下拉模式——而且，由于同一页面上的一些指向锚点的链接，我正在寻找一种方法来强制下拉菜单在点击时关闭，而不仅仅是鼠标悬停.

模式在这里：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>

我需要做的是把 .active 类拿走，onclick。尝试了几种方法，但没有一种方法是正确的。

非常感谢，

-m

4

1 回答 1

0

更新

尝试这样的事情（它很丑，但现在可以使用......也许你可以稍后修复它）：

  <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>
于 2013-06-19T15:38:54.913 回答