Modernizr.mq不能在Safari中工作;多个事件触发器

Modernizr.mq not working in Safari & multiple event triggers?

本文关键字：事件 触发器 工作 mq 不能 Safari Modernizr      更新时间：2023-09-26

我有一个基于浏览器宽度的3种不同风格和功能的子导航。看现场直播

$(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。我做错了什么?

编辑::菜单似乎没有扩展在移动safari或移动chrome在所有，而我认为这纯粹是一个safari问题。手机上的小箭头和平板电脑上的菜单按钮确实会改变，如果我点击菜单应该在的地方，它的反应就像去了链接，但菜单是不可见的……真的奇怪。

尝试在从一个媒体查询中添加的单击事件处理程序上使用.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();
相关文章：