Question

我正在尝试创建一个网站，所以无论何时单击带有id="slider-toggle"的按钮，菜单都会打开。第一次加载页面时，它工作正常。

每当您调整窗口大小时都会出现问题。每当您调整窗口大小然后单击按钮时，控制台日志会显示“打开它，关闭它”。而它应该只说“打开它”或“关闭它”。

然后，无论何时继续调整窗口大小然后单击按钮，它都会显示“打开，关闭，打开，关闭，打开，关闭等等”。

据我所知，jQuery的resize（）方法有问题。

或者任何人都可以在我的代码中看到任何缺陷吗？

var container = $('#container');
var menu = $('#desktop-menu');

function myswipemenu(){

  //toggle function
  function toggleSwipeMenu(){
    if(container.hasClass("open")){
      console.log("close it");
    }
    else {
      console.log("open it");
    }
  }

  $('#slider-toggle').click(toggleSwipeMenu);

}
function callback () {
  windowsize = $(window).width();

    menu.removeClass('slidermenu');
    container.removeClass('thecontent');
    menu.insertAfter($(".header-main"));


  if (windowsize < 1160) {

    menu.addClass('slidermenu');
    container.addClass('thecontent');

    myswipemenu();
  }
  else {

    menu.removeClass('slidermenu');
    container.removeClass('thecontent');
  }
}

$(window).ready(callback);
$(window).on('resize', callback);

Answer 1

您正在调整resize事件中调用以下函数。

myswipemenu()

事件一次又一次地被绑定。

在resize事件中删除对该函数的调用，它不会再次被调用。如果您通过窗口拖动来调整大小，那么将多次调用该函数并使浏览器超载。

jQuery window.resize（）中的错误？

1 个答案: