toggle事件仅响应用户交互，JS修改open属性不会触发；需用addEventListener绑定，通过e.target.open判断状态；手风琴需手动关闭兄弟节点；兼容性差时应降级为click监听或CSS方案。
toggle 事件确实存在，但只在用户点击 summary 时触发，JS 修改 open 属性完全不会派发它——这是绝大多数人查完 MDN 就立刻踩坑的地方。
为什么toggle事件监听不到状态变化
浏览器只对**用户交互**（鼠标点击、键盘空格/回车）响应并派发 toggle 事件。以下操作都不会触发它：
-
detailsEl.open = true或detailsEl.open = false -
detailsEl.setAttribute('open', '')或detailsEl.removeAttribute('open') detailsEl.toggleAttribute('open')
事件回调里读到的 e.target.open 是最新值，但你无法靠它区分“是用户点的”还是“是代码设的”。如果你混用 JS 控制和原生点击，状态和副作用就容易脱节。
如何正确绑定toggle事件并判断展开/收起
必须用 addEventListener('toggle', ...)，且不能写成 ontoggle 或内联 onToggle。关键逻辑只有两行：
立即学习“前端免费学习笔记（深入）”；
const details = document.querySelector('details');
details.addEventListener('toggle', (e) => {
if (e.target.open) {
console.log('已展开');
} else {
console.log('已收起');
}
});
注意几个硬性事实：
-
e.target永远是details元素，不是summary -
e.detail始终为undefined，别依赖它 - 事件在 DOM 状态更新后立即触发，
details.open已同步生效 - 该事件不冒泡，无法委托到父容器；IE 全系不支持
多个details共存时的手风琴效果怎么实现
原生不支持自动手风琴，必须手动关闭兄弟节点。监听 toggle 后，检查当前是否展开，再遍历其他 details 并移除 open 属性：
document.querySelectorAll('details').forEach(details => {
details.addEventListener('toggle', () => {
if (details.open) {
document.querySelectorAll('details').forEach(d => {
if (d !== details) d.removeAttribute('open');
});
}
});
});
这个逻辑成立的前提是：所有 details 都已插入 DOM。如果内容是动态渲染（如模板引擎、innerHTML 注入），得在插入后单独调用绑定逻辑，不能只靠页面加载时的一次 querySelectorAll。
兼容性差或需要统一控制时的替代方案
Safari ≤15.4、旧版 Edge、所有 IE 都不支持 toggle 事件。更麻烦的是：即使检测到 'toggle' in Event，旧 Safari 也可能静默失败（不报错也不执行回调）。稳妥做法是降级到 click + 状态轮询：
- 监听
details的click，但只在点击落在summary上时处理 - 用
setTimeout(() => console.log(details.open), 0)延迟读取，确保状态已更新 - 或者彻底放弃原生，改用
max-height+overflow: hidden+ class 切换，自己管理全部状态和动画
真正容易被忽略的点是：哪怕你只在现代浏览器里开发，只要项目里存在任何一处 JS 主动修改 open，你就必须自己封装状态同步逻辑——因为 toggle 事件永远不会告诉你“我被代码关掉了”。
