窗口宽度大于800px刷新后jQuery点击事件失效问题求助

嘿，我来帮你搞定这个点击事件失效的问题！

首先得搞清楚问题出在哪：你现在的代码只在页面初始化时判断一次窗口宽度，如果加载时窗口宽度大于800px，那段绑定点击事件的代码根本不会执行。哪怕之后你把窗口缩小到800px以下，点击事件也不会自动生效——因为没有监听窗口尺寸变化来重新绑定事件。

下面是具体的解决方案，分步骤来：

1. 抽离点击事件的处理函数 #

把动画逻辑单独拎出来，这样方便后续绑定和解绑，避免匿名函数无法精准解绑的问题：

// 单独定义菜单点击的处理逻辑
function handleMenuClick() {
  $('.menuLinks').css({
    'animation-name': 'menuLinks',
    'animation-duration': '.3s',
    'animation-fill-mode': 'forwards'
  });
}

2. 写一个动态绑定/解绑事件的函数 #

这个函数会根据当前窗口宽度，决定是给.menu绑定点击事件，还是解绑事件：

// 根据窗口宽度切换事件绑定状态
function toggleMenuEvent() {
  const windowWidth = $(window).width();
  
  if (windowWidth < 800) {
    // 先解绑再绑定，防止重复绑定导致多次触发
    $(document).off('click', '.menu', handleMenuClick);
    $(document).on('click', '.menu', handleMenuClick);
  } else {
    // 窗口宽度≥800时，解绑点击事件
    $(document).off('click', '.menu', handleMenuClick);
    // 可选：如果需要在大屏模式下重置菜单状态，加上这行
    $('.menuLinks').css('animation-name', 'none');
  }
}

3. 初始化+监听窗口 resize 事件 #

页面加载时先执行一次绑定逻辑，同时监听窗口尺寸变化，实时更新事件状态（记得加防抖，避免频繁触发）：

$(document).ready(function() {
  // 页面初始化时执行一次
  toggleMenuEvent();
  
  // 监听窗口resize，加防抖优化性能
  let resizeTimer;
  $(window).on('resize', function() {
    clearTimeout(resizeTimer);
    // 250ms延迟执行，可根据需求调整
    resizeTimer = setTimeout(toggleMenuEvent, 250);
  });
});

额外优化建议：用CSS类控制动画 #

把动画样式写到CSS类里，和JS逻辑分离，维护起来更方便：

/* CSS里定义动画类 */
.menuLinks-active {
  animation-name: menuLinks;
  animation-duration: .3s;
  animation-fill-mode: forwards;
}

然后把JS处理函数改成：

function handleMenuClick() {
  $('.menuLinks').addClass('menuLinks-active');
}

窗口变宽时移除类：

$('.menuLinks').removeClass('menuLinks-active');

这样修改后，不管你是在大屏下刷新页面，还是拖动窗口改变尺寸，点击事件都会根据窗口宽度自动生效或失效啦！

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