classList.toggle 是最直接、最安全的切换类名方式，自动判断并增删类名，适用于菜单展开/收起等开关式交互；不适用于需强制设为开/关的场景，此时应使用 add 或 remove。
classList.toggle 是最直接、最安全的切换类名方式，它自动判断元素是否已有该类：有则移除，无则添加，无需手动检查 contains。
什么时候用 toggle 而不是 add/remove
当你需要「开关式」控制一个视觉或状态类（比如菜单展开/收起、暗色模式切换、选中高亮）时，toggle 就是唯一应选的方法。硬写 if (el.classList.contains('active')) el.classList.remove('active') else el.classList.add('active') 不但啰嗦，还容易在并发操作中出错（比如快速连点两次导致状态错乱）。
- 适合响应用户点击、键盘快捷键等明确的“翻转”动作
- 不适用于需要强制设为“开”或“关”的场景（此时该用
add或remove） - 注意：传入第二个参数（布尔值）可将其退化为条件式增删，但会失去“自动判断”的语义优势，一般不推荐
toggle 的第二个参数到底要不要传
可以传 true 或 false，让 toggle 变成“强制设置”：传 true 等价于 add，false 等价于 remove。但这违背了 toggle 的设计本意——它本就是为“不确定当前状态”而生的。
- 常见误用：
el.classList.toggle('hidden', isVisible)—— 此时不如直接写isVisible ? el.classList.remove('hidden') : el.classList.add('hidden')，逻辑更直白 - 真正有用的场景极少，比如服务端渲染后需根据初始数据统一“同步状态”，但这类逻辑通常更适合在初始化阶段用
add/remove一次到位
兼容性与常见错误现象
IE10+ 支持 classList，但 IE10–IE11 不支持 toggle 的第二个参数（会静默忽略）。如果你必须兼容 IE11，又想用条件切换，得自己封装：
立即学习“前端免费学习笔记（深入）”；
function toggleClass(el, className, force) {
if (typeof force === 'boolean') {
force ? el.classList.add(className) : el.classList.remove(className);
} else {
el.classList.toggle(className);
}
}
- 错误现象：
el.classList.toggle('active')在 IE11 中执行但无效果？先确认是否误用了第二个参数 - 注意：
toggle只接受单个类名字符串，不能传多个（如toggle('a b')会把'a b'当作一个类名处理） - 性能上毫无压力，比手动
contains+add/remove还略快，浏览器内部做了优化
真正的难点不在语法，而在于状态管理边界——比如多个按钮共用同一个类名、事件监听未及时解绑、或 CSS 类本身存在继承冲突。这些不会报错，但会让 toggle 看似“失灵”。
