常规导航与汉堡菜单切换jQuery问题：窗口Resize后未正常刷新

刚做第一个网站就碰到这种细节问题太正常了！我帮你捋清楚问题根源，再给你一套落地的解决方案——

问题出在哪？ #

你现在的代码应该只处理了「页面加载时的初始状态」和「汉堡菜单的点击切换」，但窗口尺寸变化（resize）的时候，没有重新检查当前宽度并同步菜单的显示状态。举个例子：你点击汉堡菜单让移动端菜单展开后，把窗口拉大到650px以上，代码没触发状态重置，导致汉堡菜单可能还显示、常规导航没出来，甚至菜单还是展开的纵向状态。

解决方案：封装状态逻辑 + 监听Resize事件 #

核心思路是把菜单的状态判断逻辑封装成可复用的函数，然后在页面初始化、汉堡点击、窗口resize时都调用它，确保任何场景下菜单状态都和当前窗口宽度匹配。

1. 基础HTML/CSS结构参考（假设你是这样写的）

<header>
  <nav class="main-nav">
    <!-- 桌面端常规导航 -->
    <ul class="nav-links">
      <li><a href="#">首页</a></li>
      <li><a href="#">关于我</a></li>
      <li><a href="#">作品</a></li>
    </ul>
    <!-- 移动端汉堡按钮 -->
    <button class="hamburger-btn">☰</button>
  </nav>
</header>

CSS（你应该已经写了类似的响应式样式）：

/* 桌面端默认样式 */
.main-nav .nav-links {
  display: flex;
  gap: 20px;
}
.main-nav .hamburger-btn {
  display: none;
  border: none;
  background: transparent;
  font-size: 24px;
}

/* 移动端断点样式 */
@media (max-width: 650px) {
  .main-nav .nav-links {
    display: none;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
  }
  .main-nav .hamburger-btn {
    display: block;
  }
  /* 菜单展开时的激活类 */
  .main-nav .nav-links.active {
    display: flex;
  }
}

2. jQuery核心代码（带防抖优化）

$(document).ready(function() {
  // 封装导航状态处理函数——所有场景都用它！
  function updateNavState() {
    const currentWidth = $(window).width();
    const $navLinks = $('.nav-links');
    const $hamburger = $('.hamburger-btn');

    if (currentWidth >= 650) {
      // 桌面端：强制重置为桌面状态，清除移动端展开残留
      $navLinks.removeClass('active').css('display', 'flex');
      $hamburger.hide();
    } else {
      // 移动端：保留用户之前的操作状态（比如之前点过展开就保持展开）
      const shouldShowLinks = $navLinks.hasClass('active');
      $navLinks.css('display', shouldShowLinks ? 'flex' : 'none');
      $hamburger.show();
    }
  }

  // 页面加载时先初始化一次
  updateNavState();

  // 汉堡菜单点击事件
  $('.hamburger-btn').on('click', function() {
    $('.nav-links').toggleClass('active');
    // 点击后同步状态，避免边界情况
    updateNavState();
  });

  // 窗口Resize事件：加防抖避免频繁触发影响性能
  let resizeTimer;
  $(window).on('resize', function() {
    clearTimeout(resizeTimer);
    // 250ms延迟执行，等窗口调整稳定后再更新状态
    resizeTimer = setTimeout(updateNavState, 250);
  });
});

关键细节说明 #

• 封装函数的好处：把判断逻辑集中在一起，不管是初始化、点击还是resize，都调用同一个函数，避免重复代码，也能保证状态统一。
• 桌面端强制重置：这是解决你问题的核心！当窗口拉到650px以上时，强制移除active类并设置为桌面端的flex显示，彻底清除移动端的展开状态残留。
• 防抖处理：窗口拖动过程中resize事件会触发几十次，用定时器延迟执行，既保证状态更新及时，又不会让浏览器卡顿。
• 移动端保留用户状态：如果你希望缩小窗口时，之前展开的菜单保持展开，就保留这个逻辑；如果希望缩小后默认收起，把shouldShowLinks改成false即可。

额外小提示 #

尽量用CSS类来控制样式（比如.active），而不是直接用jQuery的css()方法——这样代码更清晰，也更容易维护。如果你的CSS里用了!important，记得去掉，否则可能会覆盖jQuery的样式设置。

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