Question

我创建了一个菜单，当浏览器调整为移动设备时，该菜单会更改为汉堡导航。问题是，如果我将其调整为移动设备，然后返回桌面，然后再返回移动设备，菜单将停止工作。

我会稍微创建一个小提琴，但任何人都可以看到为什么这会发生在下面的jQuery中？

if(window.innerWidth < 960) {

  jQuery('header nav .main').hide();
  jQuery('header nav .main').removeAttr('style');
  jQuery('header .mob-nav .menu').removeAttr('style');
  jQuery('header .mob-nav .menu').removeClass('selected');

  jQuery('header .mob-nav .menu').on('click', function(){

    if( jQuery(this).hasClass('selected') ) {
      jQuery(this).removeClass('selected');
      jQuery('header nav .main').stop().slideUp()
    } else {
      jQuery(this).addClass('selected');
      jQuery('header nav .main').stop().slideDown();
    }

  });

} else {
  jQuery('header nav .main').removeAttr('style');
}

Answer 1

这可能是因为每次将窗口调整为960像素以下时，附加的点击处理程序会附加到标题.mob-nav .menu＆＃39;。首先取消绑定先前连接的处理程序，使用＆＃39; off＆＃39;。尝试将其更改为：

if(window.innerWidth < 960) {

  jQuery('header nav .main').hide();
  jQuery('header nav .main').removeAttr('style');
  jQuery('header .mob-nav .menu').removeAttr('style');
  jQuery('header .mob-nav .menu').removeClass('selected');

  jQuery('header .mob-nav .menu').off('click').on('click', function(){

    if( jQuery(this).hasClass('selected') ) {
      jQuery(this).removeClass('selected');
      jQuery('header nav .main').stop().slideUp();
    } else {
      jQuery(this).addClass('selected');
      jQuery('header nav .main').stop().slideDown();
    }

  });

} else {
  jQuery('header nav .main').removeAttr('style');
}

或者考虑将绑定事件代码放在函数之外。

浏览器调整大小时，简单的jQuery移动菜单停止工作

1 个答案: