Question

我有一个子导航，根据浏览器宽度有3种不同的样式和功能。 See it live here

$(function() {
 $(window).resize(function() {
if(Modernizr.mq('(min-width:641px) and (max-width: 1200px)')) {
     $(".subnav-menu").click(function() {
              $('.primary-subnav').slideToggle();
              $('.subnav-close').show();
     });
     $(".subnav-close").click(function() {
              $('.primary-subnav').slideToggle();
              $('.subnav-close').hide();
     });
     $(".tablet-subnav li").click(function() {
              $('.primary-subnav').slideToggle();
              $('.subnav-close').hide();
     });
}
else if(Modernizr.mq('(max-width: 640px)')) {
     $(".subnav").click(function() {
              $('.primary-subnav').slideToggle();
              $('.subnav-mobile-open').toggle();
              $('.subnav-mobile-close').toggle();
     });
   }
 }).trigger('resize');
});

点击时应该显示的菜单在桌面或手机上的Safari上根本没有显示，在其他几个mac上测试后什么也没得到。它在Chrome / Firefox中运行良好，但有时它会多次触发菜单的slideToggle。我做错了什么？

编辑::菜单似乎根本没有在移动版游戏或移动版Chrome中扩展，而我认为这纯粹是一个游猎问题。移动设备上的小箭头和菜单按钮平板电脑确实会发生变化，如果我点击下面有菜单应该是，它会像回到链接一样反应，但菜单不可见......真的很奇怪。

Answer 1

尝试对从一个媒体查询添加的点击事件处理程序使用.off( "click", "**" )，并将其替换为当前媒体查询所需的.on( "click" )事件处理程序。

此外，您可以通过向链中添加.stop( true, true )来创建一个漂亮的淡入淡出效果，而不会出现多个排队动画的常见问题。

没有你的HTML，我无法真正测试它，但这里的内容应该是什么样的：

$( window ).on( "resize", function () 
{
  if( Modernizr.mq( "(min-width:641px) and (max-width: 1200px)" )) 
  {
    $( ".subnav" ).off( "click", "**" );

    $( ".subnav-menu" ).on( "click", function () 
    {
      $( ".primary-subnav" )
        .stop( true, true)
        .slideToggle();

      $( ".subnav-close" )
        .stop( true, true )
        .show();
    });

    $( ".subnav-close, .tablet-subnav li" ).on(" click", function () 
    {
      $( ".primary-subnav" )
        .stop( true, true )
        .slideToggle();

      $( ".subnav-close" )
        .stop( true, true )
        .hide();
    });
  }
  else if ( Modernizr.mq( "(max-width: 640px)" )) 
  {
    $( ".subnav-menu, .subnav-close, .tablet-subnav li" ).off( "click", "**" );

    $( ".subnav" ).on( "click", function () 
    {
      $( ".primary-subnav" )
        .stop( true, true )
        .slideToggle();

      $( ".subnav-mobile-open, .subnav-mobile-close" )
        .stop(true, true)
        .toggle();
    });
  }
})
.resize();

Modernizr.mq无法在Safari＆amp;多个事件触发器？

1 个答案: