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 に答える