求助：jQuery中resize函数失效，需刷新页面才触发不同宽度逻辑

嘿，我明白你遇到的困扰了——你的代码核心问题在于每次窗口 resize 或者页面加载时，都在给.nav-button a重复绑定 click 事件，这会导致同一个元素上叠加了多份事件处理器。旧的事件不会自动被覆盖，所以即使窗口宽度变了，之前绑定的逻辑依然在生效，只有刷新页面清空旧事件后，新的逻辑才会正常工作。

下面是具体的修复方案：

核心修复思路 #

• 先解绑旧的 click 事件，再绑定新的，避免事件叠加
• 将不同宽度下的点击逻辑抽成独立函数，让代码更清晰易维护
• 缓存窗口宽度的计算结果，减少重复DOM操作

修改后的完整代码 #

// 先定义不同宽度下的点击逻辑函数
function handleNavClickLarge() {
  $(".nav-large").slideToggle('slow');
  $(this).toggleClass('btn-open').toggleClass('btn-close');
}

function handleNavClickSmall() {
  $(".overlay").fadeToggle(200);
  $(this).toggleClass('btn-open').toggleClass('btn-close'); // 补全你代码里未写完的btn-xxx类
}

// 定义resize和load时的处理函数
function handleWindowResize() {
  var windowWidth = parseInt($(window).width());
  var $navButton = $(".nav-button a");

  // 先解绑所有之前绑定的click事件，避免叠加
  $navButton.off('click');

  if (windowWidth > 620) {
    $navButton.on('click', handleNavClickLarge);
  } else if (windowWidth < 620) {
    $navButton.on('click', handleNavClickSmall);
  }
}

// 绑定load和resize事件
$(window).on("load resize", handleWindowResize);

额外优化建议 #

• 可以给resize事件添加防抖处理，避免窗口拖动时频繁触发函数，提升性能：

  // 防抖函数
  function debounce(func, delay) {
    let timeoutId;
    return function() {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(func, delay);
    };
  }
  
  // 用防抖后的函数绑定resize事件
  $(window).on("load", handleWindowResize);
  $(window).on("resize", debounce(handleWindowResize, 200));
  

• 注意你的原代码里toggleClass('btn-...')没写完，记得补全对应的类名哦。

内容的提问来源于stack exchange，提问作者sarah3585