Question

我有以下jquery代码，目的是在窗口很大（> = 1024）时运行一个函数，而另一个函数在调整大小时运行。

console.logs在调整大小时按预期显示，但函数不会更改。这意味着，如果浏览器以大尺寸加载，则在调整大小时，仍会使用大函数。

（调整使用https://stackoverflow.com/a/4541963/1310375和https://stackoverflow.com/a/9828919/1310375）

的代码

var waitForFinalEvent = (function () {
  var timers = {};
  return function (callback, ms, uniqueId) {
    if (!uniqueId) {
      uniqueId = "Don't call this twice without a uniqueId";
    }
    if (timers[uniqueId]) {
      clearTimeout (timers[uniqueId]);
    }
    timers[uniqueId] = setTimeout(callback, ms);
  };
})();

$(window).on('resize', function(){
  var win = $(this); //this = window

  waitForFinalEvent(function(){
  console.log('Resize...');

    if (win.width() >= 1024) { 
      console.log('large');

      $('.header-navigation-menu > div > ul > li').on({
        mouseenter: function() {
          console.log('waitEnterExit');
          waitEnterExit(this, true);
          $(this).children('.nav-menu-div').addClass('open');
        },
        mouseleave: function() {
          waitEnterExit(this, false);
        },
      });

      function waitEnterExit(el, inside) {
        var button = $(el);
        setTimeout(function() {
          var hovered = button.is(':hover');
          if (hovered && inside)
            button.children('.nav-menu-div').addClass('open');
          else if (!hovered && !inside)
            button.children('.nav-menu-div').removeClass('open');
        }, 500);
      }
    }

    if (win.width() <= 1023) { 
      console.log('small');

      $('.menu-link-button').on({
        click: function() {
          $(this).parent().children('.nav-menu-div').slideToggle();
        }
      });
    }
  }, 500);
});

Answer 1

您正在以错误的方式执行此操作，请尝试以下步骤和代码，

首先从window resize事件中分离所有函数和事件绑定。然后检查窗口的宽度并切换要隐藏的元素（如果可见）

try {
    // 
} catch(Error e) {
    // This should work
} catch(Throwable e) {
    // This should work as well
}

如果function waitEnterExit(el, inside) { var button = $(el); setTimeout(function() { var hovered = button.is(':hover'); if (hovered && inside) button.children('.nav-menu-div').addClass('open'); else if (!hovered && !inside) button.children('.nav-menu-div').removeClass('open'); }, 500); } $('.header-navigation-menu > div > ul > li').on({ mouseenter: function() { console.log('waitEnterExit'); var win = $(window); if (win.width() >= 1024) { console.log('large'); waitEnterExit(this, true); $(this).children('.nav-menu-div').addClass('open'); } }, mouseleave: function() { if (win.width() >= 1024) { console.log('large'); waitEnterExit(this, false); } }, }); $('.menu-link-button').on({ click: function() { var win = $(window); if (win.width() <= 1023) { console.log('small'); $(this).parent().children('.nav-menu-div').slideToggle(); } } }); $(window).on('resize', function() { var win = $(this); //this = window waitForFinalEvent(function() { if (win.width() >= 1024) { console.log('large'); $('.menu-link-button').parent().children('.nav-menu-div').slideUp(); // hide it any way on large screen } else { $('.header-navigation-menu > div > ul > li .nav-menu-div').removeClass('open'); // hide it in small screens } console.log('Resize...'); }, 500); });和window>= 1024一次又一次向上滑动，请检查条件是否具有可见性

$('.menu-link-button')

Jquery函数在窗口大小调整时不会改变

1 个答案: