details元素原生支持toggle事件，但必须用addEventListener('toggle', )显式监听，仅用户点击summary时触发，JS修改open属性不触发，且不冒泡、不兼容IE、不能内联绑定。
toggle 不是原生 DOM 事件，不存在 toggle 事件监听一说。真正该用的是 click（或 change）事件配合 classList.toggle() 方法——这是实现类名切换的唯一可靠路径。
为什么不能监听 toggle 事件？
HTML 元素没有名为 toggle 的标准事件。有人误以为 <input type="checkbox"> 切换时会触发 toggle，其实它只发 change；按钮点击只发 click。试图写 element.addEventListener('toggle', ...) 会静默失败，无报错也无响应。
常见错误现象：
– 页面点击无反应，控制台没报错但逻辑卡死
– 开关状态不同步（比如 checkbox 已勾选，但 body 没加 dark 类）
– 多次点击后类名堆积或漏删
- 所有基于“切换”的交互，本质都是「监听用户动作 → 读取当前状态 → 手动翻转类名」
-
classList.toggle('active')是原子操作，比先contains再add/remove更安全、更短、不竞态 - 若需 force 行为（比如强制开/关），才传第二个参数：
el.classList.toggle('open', isOpen)
checkbox 触发类名切换必须用 change 而非 click
对 <input type="checkbox">，click 在某些场景下可能早于状态更新（如 label 点击、空格键触发），导致 checked 值读错。而 change 保证在真实状态变更后才触发。
立即学习“前端免费学习笔记（深入）”；
正确写法示例：
<input type="checkbox" id="theme-toggle">
<label for="theme-toggle">暗色模式</label>
<script>
document.getElementById('theme-toggle').addEventListener('change', function() {
document.body.classList.toggle('dark', this.checked);
});
</script>
- 用
this.checked作为 force 参数，确保类名与控件状态严格一致 - 避免用
toggle('dark')无参调用——它只翻转，不校准，容易和用户手动修改 DOM 后的状态脱节 - label 必须带
for属性，否则空格键或语音辅助无法触发 change
按钮切换类名：click 就够了，但得防重复绑定
普通 <button></button> 没有内在状态，所以只能靠 click 监听 + classList.toggle() 维持视觉反馈。但要注意脚本重复执行导致多次绑定事件。
典型陷阱：
- 页面动态加载 JS 两次（比如开发时热更新、或模块被 import 两次），
addEventListener被调两次 → 点一次触发两次切换 - 用内联
onclick="..."无法复用逻辑，且拿不到事件对象，没法e.preventDefault() - 未检查目标元素是否存在就调用
classList，报Cannot read property 'classList' of null
稳妥做法：
const btn = document.querySelector('#menu-toggle');
const menu = document.querySelector('#nav-menu');
if (btn && menu) {
btn.addEventListener('click', () => {
menu.classList.toggle('open');
});
}
classList.toggle 和 visibility/display 的配合要点
仅靠 toggle 切类名还不够，CSS 层必须匹配。最常踩的坑是类名切对了，但样式没生效或布局跳变。
- 显隐首选
display: none+display: block（或 flex/grid），适合大多数开关场景 - 需要保持占位、做 fade 动画时，才用
visibility: hidden+opacity: 0，但记得同时设pointer-events: none防误点 - 别在一个元素上混用
display和visibility控制显隐——CSS 层叠优先级会让行为不可预测 - transition 必须写在「默认类」里，比如
.panel { transition: max-height 0.3s ease; }，而不是.panel.open里
复杂点在于：动画属性（如 max-height）无法从 0 平滑过渡到 auto，此时得用 JS 测高 + 设置具体像素值，或者改用 transform: scaleY() 或 clip-path 替代。
