如何根据窗口尺寸条件阻止jQuery的slideUp/slideDown脚本运行？

嘿，这个问题我之前做响应式导航时也踩过坑！核心问题是你没有在窗口尺寸切换时，动态重置导航的交互逻辑——简单说就是，当窗口缩到800px以下时，之前绑定的slideUp/slideDown事件还在生效，而且没有强制让下拉菜单保持展开状态。

下面是我验证过的解决方案，分步骤来：

核心思路 #

1. 统一封装导航初始化逻辑，根据窗口尺寸决定启用动画还是直接展开菜单
2. 每次初始化前解绑旧事件，避免重复绑定导致动画混乱
3. 处理动画队列，防止resize时动画卡顿残留
4. 给resize事件加防抖，提升性能

完整代码示例 #

// 工具函数：判断当前是否为桌面端（宽度>800px）
function isDesktop() {
  return $(window).width() > 800;
}

// 初始化导航交互
function initNav() {
  const $parentLi = $('.nav > li'); // 替换成你的父级li选择器
  const $nestedUl = $parentLi.find('ul'); // 嵌套的下拉菜单

  // 第一步：先解绑所有旧事件，避免重复绑定触发多次动画
  $parentLi.off('mouseenter mouseleave click');

  if (isDesktop()) {
    // 桌面端：启用hover动画
    $parentLi.hover(
      function() {
        // stop(true, true)：停止当前动画+清空队列+跳到动画结束状态
        $(this).find('ul').stop(true, true).slideDown();
      },
      function() {
        $(this).find('ul').stop(true, true).slideUp();
      }
    );
    // 桌面端初始状态：收起所有下拉菜单
    $nestedUl.slideUp();
  } else {
    // 移动端：禁用动画，直接展开所有下拉菜单
    // 用show()而不是slideDown，彻底避免动画触发
    $nestedUl.stop(true, true).show();
  }
}

// 页面加载时初始化
$(window).on('load', initNav);

// 窗口resize时重新初始化（加防抖避免频繁触发）
$(window).on('resize', function() {
  clearTimeout(window.resizeTimer);
  window.resizeTimer = setTimeout(initNav, 250); // 250ms延迟，可按需调整
});

关键细节说明 #

• 解绑旧事件：每次调用initNav()时用off()清除之前绑定的hover/click事件，这是解决动画残留的核心——如果不解绑，之前的事件还会触发动画，就算窗口已经变小了。
• stop(true, true)：这个方法能强制终止当前正在执行的动画，清空动画队列，并且直接跳到动画的最终状态，避免resize时出现菜单“跳来跳去”的卡顿。
• 防抖处理：resize事件会在窗口拖动过程中频繁触发，加个定时器延迟执行初始化，能减少不必要的计算，提升页面性能。
• 移动端用show()：直接用show()而不是slide类方法，从根源上禁用动画，确保菜单直接展开。

如果你的导航是用click触发下拉而不是hover，只需要把hover()换成click()的逻辑就行，核心思路是一样的。

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