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>

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

非常感谢，

-m

Answer 1

<强>更新

尝试这样的事情（这很丑陋，但现在可以工作......以后你可以修复它）：

  <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>

点击隐藏下拉菜单

1 个答案: