本文详解如何用原生javascript和jquery结合`classlist.toggle()`与状态管理，实现按钮点击时动态添加/移除css类，完成导航栏展开/收起、样式切换等常见交互需求。

在前端开发中，“点击添加类、再点击移除类”是一种高频交互模式（如汉堡菜单展开/收起、播放/暂停按钮、主题切换等）。你当前代码的问题核心在于：逻辑判断依赖了不稳定的 e.name 属性，且对 e 是否为真值的判断无法反映按钮实际状态；同时混用原生 DOM 操作与 jQuery，导致状态不同步。

✅ 推荐方案：使用 classList.toggle() + 明确的状态锚点

最简洁、可靠的方式是避免手动判断增删，改用 toggle() 方法——它会自动检测元素是否已存在该类，并执行对应操作（有则删，无则加）：

// ✅ 推荐写法（纯原生，语义清晰）
function toggleMenu() {
  const list = document.querySelector('ul');
  const navbar = document.querySelector('.navbar');

  // 切换菜单列表的显示状态（Tailwind 类名需确保已定义）
  list.classList.toggle('top-[80px]');
  list.classList.toggle('opacity-100');

  // 切换导航栏尺寸样式
  navbar.classList.toggle('sticky-costum-2');
}

然后在 HTML 中绑定事件（例如 burger 按钮）：

☰ Menu
...

? 提示：Tailwind 的 top-[80px] 和 opacity-100 需确保项目已启用自定义值支持（或改用标准工具类如 top-20 / opacity-0 + opacity-100 更稳妥）。

⚠️ 为什么你原来的代码失效？

• e.name 并非标准事件对象属性（e 是 Event 对象，没有 name），此处误将 e 当作按钮 DOM 元素；
• if (e) { ... } else { ... } 永远执行 if 分支（因为事件对象恒为真值），导致 sticky-costum-2 只增不减；
• jQuery 的 $('.navbar').addClass(...) 没有对应 removeClass() 调用，逻辑不对称。

? 进阶技巧：统一状态管理（适用于复杂场景）

若需跨多个元素同步状态（如同时控制菜单、遮罩层、按钮图标），建议用一个布尔变量或数据属性记录当前状态：

let isMenuOpen = false;

function toggleMenu() {
  const list = document.querySelector('ul');
  const navbar = document.querySelector('.navbar');
  const toggleBtn = document.getElementById('menu-toggle');

  if (isMenuOpen) {
    list.classList.remove('top-[80px]', 'opacity-100');
    navbar.classList.remove('sticky-costum-2');
    toggleBtn.innerHTML = '☰ Menu';
  } else {
    list.classList.add('top-[80px]', 'opacity-100');
    navbar.classList.add('sticky-costum-2');
    toggleBtn.innerHTML = '✕ Close';
  }
  isMenuOpen = !isMenuOpen;
}

? 总结与最佳实践

• ✅ 优先使用 element.classList.toggle('class-name') —— 简洁、幂等、不易出错；
• ✅ 样式尽量写在 CSS 中，JS 只负责“开关类”，符合关注点分离原则；
• ✅ 使用语义化 ID 或 data-* 属性标识可交互元素，避免依赖非标准属性（如 e.name）；
• ✅ 混合使用原生 JS 与 jQuery 时，确保操作目标一致（不要一半用 document.querySelector，一半用 $() 处理不同实例）；
• ✅ 在真实项目中，建议用事件委托或现代框架（如 React 的 useState）管理状态，提升可维护性。

掌握这一模式，你就能轻松实现播放/暂停、暗色模式切换、折叠面板等所有「二态交互」需求。