本文详解如何用原生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 按钮）：
- ...
? 提示：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）管理状态，提升可维护性。
掌握这一模式，你就能轻松实现播放/暂停、暗色模式切换、折叠面板等所有「二态交互」需求。
