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

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

我将在稍后创建一个小提琴，但是没有人能从下面的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');
}

最佳答案

发生这种情况的原因是，每当窗口大小调整到960像素以下时，都会在“ header .mob-nav .menu”上附加一个单击处理程序。首先使用“ off”取消绑定先前附加的处理程序。尝试将其更改为：

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');
}

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