Bootstrap+jQuery响应式导航栏调整宽度时汉堡菜单失效需刷新恢复

问题根因 #

• 宽度判断逻辑仅在页面首次加载时执行1次，未监听窗口尺寸变化事件，调整窗口后不会重新适配交互逻辑
• 事件重复绑定、状态变量冲突，点击外部关闭菜单和汉堡动画逻辑互相干扰
• JS控制菜单显隐时写入的行内样式，在窗口切换到桌面断点后不会被清除，直接覆盖CSS媒体查询规则
• 选择器编写错误：代码中绑定$("nav")点击事件，但实际HTML中不存在<nav>标签，导航容器为<ul class="nav">，事件冒泡拦截完全失效
• 空参数调用toggleClass()会无差别切换元素所有类名，直接导致样式错乱
• 引入的jQuery 1.10.2版本过低，和Bootstrap v5.2存在兼容问题
• 缺失桌面端隐藏汉堡按钮的CSS规则，大屏下汉堡按钮会异常常驻

修复后完整代码 #

JS代码 #

/*navigation icon animation*/
let trigger = 'ham';
const MOBILE_BREAKPOINT = 768;

// 导航初始化逻辑，页面加载、窗口尺寸变化时都会执行
function initNav() {
  // 解绑所有旧事件，避免重复绑定
  $('#toggle-menu').off('click');
  $(document).off('click.navClose');
  $('.nav').off('click');

  // 清除JS写入的行内样式，避免覆盖CSS媒体查询规则
  $('.nav').removeAttr('style');
  $('#toggle-menu').removeClass('menu-is-active');
  trigger = 'ham';

  // 汉堡按钮点击逻辑
  $('#toggle-menu').on('click', function(e) {
    e.stopPropagation();
    trigger = 'X';
    $(this).toggleClass('menu-is-active');

    // 仅移动端断点执行菜单开合动画
    if ($(window).width() <= MOBILE_BREAKPOINT) {
      if ($('.nav').is(':visible')) {
        $('.nav').animate({
          height: '0'
        }, 200, function() {
          $(this).hide();
        });
      } else {
        $('.nav').show().animate({
          height: '180px'
        }, 200);
      }
    }
  });

  // 点击导航区域阻止冒泡，不触发外部关闭
  $('.nav').on('click', function(e) {
    e.stopPropagation();
  });

  // 点击外部区域关闭菜单、还原汉堡状态
  $(document).on('click.navClose', function() {
    if ($(window).width() <= MOBILE_BREAKPOINT && trigger == 'X') {
      $("#toggle-menu").removeClass('menu-is-active');
      $('.nav').animate({
        height: '0'
      }, 200, function() {
        $(this).hide();
      });
      trigger = 'ham';
    }
  });
}

jQuery(document).ready(function() {
  initNav();
  // 防抖处理窗口resize事件，避免拖动窗口时频繁执行逻辑卡顿
  $(window).on('resize', function() {
    clearTimeout(window.resizeTimer);
    window.resizeTimer = setTimeout(initNav, 100);
  });
});

CSS代码 #

/*-- Nav Bar --*/
header a {
  color: #ffffff;
  text-decoration: none;
}

header a:focus,
a:hover {
  color: #a7a7a7;
}

header a:active {
  color: #b8b8b8;
}

header {
  display: flex;
  height: 40px;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  position: relative;
  z-index: 2;
}

.logo {
  float: left;
  cursor: pointer;
  text-decoration: none;
}

.nav {
  float: right;
  height: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 桌面端默认隐藏汉堡按钮 */
#toggle-menu {
  display: none;
}

.nav>li {
  display: inline-block;
  padding-right: 20px;
  font-size: 0.9rem;
}

.nav>li:last-child {
  padding-right: 10px;
}

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: white;
  text-decoration: none;
}

.hover-underline-animation:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1.5px;
  bottom: -3px;
  left: 0;
  background-color: #f0bc1f;
  transform-origin: bottom right;
  transition: transform 0.3s ease-out;
}

.hover-underline-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.language {
  text-decoration: none;
  color: #ffffff;
}

.header-divider {
  position: absolute;
  border-top: 1.5px solid white;
  width: 50%;
  z-index: 2;
  right: 0px;
  top: 25px;
  opacity: 0.3;
}

@media (max-width: 768px) {
  #toggle-menu {
    display: block;
  }
  .nav {
    position: fixed;
    width: 100%;
    text-align: center;
    display: none;
    background-color: #d3d3d33f;
    left: 0px;
    top: 39px;
    height: 0;
  }
  .nav li:hover {
    background-color: #f0bc1f;
    transition: ease-in-out;
  }
  .nav li a:hover {
    color: #000000;
  }
  .nav>li {
    display: block;
    float: center;
    padding: 8px 0px;
  }
  .nav>li:last-child {
    border-bottom: none;
  }
  .hover-underline-animation {
    display: block;
    position: relative;
    color: white;
    text-decoration: none;
  }
  .hover-underline-animation:hover {
    background-color: #f0bc1f;
  }
  .hover-underline-animation:after {
    content: '';
    position: absolute;
    display: none;
  }
  /*--- logo ---*/
  .logo {
    float: left;
    display: block;
    cursor: pointer;
  }
  /*--- Navigation Burger Menu ---*/
  #toggle-menu {
    float: right;
    cursor: pointer;
    margin-right: 20px;
  }
  #toggle-menu div {
    width: 15px;
    height: 15px;
    position: relative;
  }
  #toggle-menu .bar {
    padding: 0;
    width: 25px;
    height: 3px;
    background-color: rgb(255, 255, 255);
    display: block;
    border-radius: 3px;
    transition: all 0.4s ease-in-out;
    position: absolute;
  }
  #toggle-menu span.bar1 {
    top: 0px;
  }
  #toggle-menu span.bar2,
  .bar3 {
    top: 8px;
  }
  #toggle-menu span.bar4 {
    top: 16px;
  }
  /*--- Burger Menu Animation---*/
  #toggle-menu.menu-is-active .bar {
    padding: 0;
    width: 25px;
    height: 3px;
    background-color: rgb(255, 255, 255);
    display: block;
    border-radius: 3px;
    transition: all 0.4s ease-in-out;
    position: absolute;
  }
  #toggle-menu.menu-is-active span.bar1 {
    top: 0px;
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    transform: translateX(20px);
    background-color: transparent;
  }
  #toggle-menu.menu-is-active span.bar4 {
    top: 16px;
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    transform: translateX(-20px);
    background-color: transparent;
  }
  #toggle-menu.menu-is-active span.bar2 {
    top: 8px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #toggle-menu.menu-is-active span.bar3 {
    top: 8px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
}

HTML代码 #

<header class="container-fluid bg-dark">
  <a href="#" class="logo">CCH</a>
  <a id="toggle-menu">
    <div id="barcontainer">
      <span class="bar bar1"></span>
      <span class="bar bar2"></span>
      <span class="bar bar3"></span>
      <span class="bar bar4"></span>
    </div>
  </a>
  <ul class="nav">
    <li><a href="#" class="hover-underline-animation">Home</a></li>
    <li><a href="#" class="hover-underline-animation">About us</a></li>
    <li><a href="#" class="hover-underline-animation">Service</a></li>
    <li><a href="#" class="hover-underline-animation">Contact</a></li>
    <li><a href="#" class="hover-underline-animation">Career</a></li>
    <li><a href="#" class="language">中文/En</a></li>
  </ul>
</header>

<!-- 替换为Bootstrap 5.2兼容的jQuery版本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

修复说明 #

• resize事件加了防抖处理，避免拖动窗口时频繁执行逻辑造成卡顿
• 每次初始化前先解绑旧事件，防止重复绑定导致的一次点击多次触发问题
• 切换断点时自动清除JS写入的行内样式，布局规则完全交还给CSS媒体查询控制，不会出现样式残留
• 修正了所有错误选择器、错误的toggleClass()调用
• 替换jQuery为Bootstrap v5.2兼容的3.6.0版本
• 补全了桌面端隐藏汉堡按钮的基础样式
• 统一菜单开合、汉堡动画的状态管理，消除逻辑冲突

内容的提问来源于stack exchange，提问作者CH.Chu