本文详解如何通过 `classlist.toggle()` 正确实现按钮点击时动态添加与移除 css 类，解决导航栏状态切换（如汉堡菜单展开/收起）中样式无法回退的问题，并提供可复用、健壮的代码范例。
在前端交互开发中，「点击一次添加样式，再点一次恢复原状」是高频需求（如汉堡菜单展开/收起、音频播放/暂停、主题切换等）。你当前的代码存在两个关键问题：
- 逻辑耦合且不可靠：用 e.name 判断状态，但 e 是事件对象（Event），它没有 name 属性（除非你手动设置），导致条件永远为 false；
- 状态管理缺失：未建立清晰的“当前是否激活”的判断依据，仅依赖易出错的临时属性，难以维护。
✅ 正确做法是：利用 DOM 元素自身的 class 状态作为唯一可信来源，配合 classList.toggle() —— 它会自动检测并切换类的存在性，无需手动判断。
✅ 推荐写法（现代、简洁、可靠）
function toggleMenu() {
const list = document.querySelector('ul');
const navbar = document.querySelector('.navbar');
// 切换菜单列表的显示状态（使用 toggle 替代 add/remove）
list.classList.toggle('top-[80px]');
list.classList.toggle('opacity-100');
// 同步切换导航栏尺寸样式
navbar.classList.toggle('sticky-costum-2');
}
// 绑定到按钮（假设按钮 id="menu-toggle"）
document.getElementById('menu-toggle').addEventListener('click', toggleMenu);? 提示：classList.toggle('className') 的行为是： 若元素已有该类 → 移除； 若元素没有该类 → 添加； 完全无需 if/else 判断，语义清晰、零出错。
? 进阶优化：支持多按钮 & 防止重复绑定
// 使用 data-* 属性解耦 HTML 与 JS，增强可维护性
document.querySelectorAll('[data-toggle-menu]').forEach(btn => {
btn.addEventListener('click', function() {
const target = document.querySelector(this.dataset.target || 'ul');
const navbar = document.querySelector('.navbar');
if (target && navbar) {
target.classList.toggle('top-[80px]', 'opacity-100');
navbar.classList.toggle('sticky-costum-2');
}
});
});HTML 示例：
<button id="menu-toggle" data-toggle-menu data-target="#main-menu">☰</button> <ul id="main-menu" class="hidden"> <li>首页</li> <li>关于</li> </ul> <nav class="navbar">...</nav>
⚠️ 注意事项
- ❌ 避免直接操作 e.name 或其他非标准事件属性判断状态；
- ❌ 不要混用 jQuery（$('.navbar')）和原生 JS（document.querySelector），保持技术栈统一；
- ✅ 所有样式变更应定义在 CSS 中（如 .sticky-costum-2 { height: 80px; }），JS 仅负责控制类的开关；
- ✅ 建议为切换类添加 CSS 过渡效果，提升用户体验：
ul, .navbar { transition: all 0.3s ease; }
✅ 总结
用 element.classList.toggle('className') 替代手动 add()/remove() 是实现「点击切换」最安全、最语义化的方式。它以 DOM 真实状态为依据，彻底规避逻辑误判，同时大幅提升代码可读性与可维护性。将样式逻辑交给 CSS，行为逻辑交给 JS —— 这正是现代前端开发的分层实践核心。
立即学习“Java免费学习笔记（深入）”；
