响应式汉堡导航栏jQuery代码窗口缩放失效问题求助

我太懂你遇到的这个坑了！这种情况其实是因为你的代码只在页面首次加载完成时跑了一次宽度判断，之后再缩放窗口的话，那段逻辑根本不会重新执行，自然就没法触发汉堡菜单的功能啦。

问题出在哪？ #

你的$(document).ready()代码只会执行一次：如果是全屏状态下刷新页面，窗口宽度大于700px，所以不会触发隐藏导航栏、绑定点击事件的逻辑；之后你缩小窗口，因为没有监听窗口大小变化的事件，代码不会重新检查宽度，汉堡菜单自然就没反应了。

修复方案 #

我们把导航栏的状态处理逻辑抽成独立函数，同时在页面加载和窗口缩放时调用它，还要解决重复绑定事件的问题：

$(document).ready(function(){
  // 封装导航栏状态处理函数，方便重复调用
  function updateNavbar() {
    const currentWidth = $(window).width();
    if(currentWidth < 700){
      // 窗口小于700px时，隐藏导航栏并绑定汉堡点击事件
      $(".topnav").hide();
      // 先解绑再绑定，避免多次resize后重复绑定事件导致点击多次触发
      $(".icon").off("click").on("click", function(){
        $(".topnav").slideToggle();
      });
    } else {
      // 窗口回到700px以上时，显示导航栏并解绑点击事件
      $(".topnav").show();
      $(".icon").off("click");
    }
  }

  // 页面加载完成后先执行一次，初始化状态
  updateNavbar();

  // 监听窗口resize事件，每次大小变化都更新导航栏状态
  $(window).on("resize", updateNavbar);
});

关键改进点 #

• 复用逻辑函数：把宽度判断和导航栏状态处理放在一个函数里，不管是页面加载还是窗口缩放，都能统一执行逻辑
• 避免重复绑定：用off("click")先解绑之前的点击事件，再重新绑定，防止多次resize后点击汉堡图标触发多次切换
• 桌面端状态重置：当窗口回到700px以上时，自动显示导航栏并解绑汉堡图标事件，避免和桌面端的导航交互冲突

这样改完之后，不管是先缩小窗口再刷新，还是先全屏刷新再缩放，汉堡菜单都能正常响应啦！

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