details元素原生不触发toggle事件，应监听click事件并读取open属性判断状态；需精确同步时可用MutationObserver监听open属性变化；纯CSS方案优先使用:has()或属性选择器实现无JS样式。
details元素原生不触发toggle事件
HTML <details> 标签本身**没有原生的 toggle 事件**，这是开发者常踩的第一个坑。你监听 toggle 却收不到任何触发，不是代码写错，而是浏览器根本不发这个事件——它只在规范草案里提过，但至今未被任何主流浏览器实现。
用click事件+open属性判断展开状态
最稳妥、兼容性最好的做法是监听 click，再读取 open 属性变化。因为用户点击 summary 或空白区域都会触发 click，且此时 DOM 已同步更新（open 值已变）：
<details id="myDetails">
<summary>点我展开</summary>
<p>隐藏内容</p>
</details>
<p><script>
const el = document.getElementById('myDetails');
el.addEventListener('click', () => {
if (el.open) {
console.log('已展开');
} else {
console.log('已折叠');
}
});
</script>- 不要用
change或input事件——<details>不支持这些 - 避免在
click中立即调用el.open = true/false后再判断，会覆盖用户行为 - 如果需要区分是用户点击 summary 还是其他区域，可用
event.target.matches('summary')
监听open属性变化要用MutationObserver
若业务逻辑依赖「open 状态真正改变」（比如动画开始、异步加载），而 click 时机太早（比如用户快速连点），可监听 open 属性变更：
const observer = new MutationObserver(() => {
if (el.hasAttribute('open')) {
console.log('现在是展开态');
} else {
console.log('现在是折叠态');
}
});
observer.observe(el, { attributes: true, attributeFilter: ['open'] });-
MutationObserver比轮询高效，也比自定义事件更可靠 - 注意：IE 不支持，如需兼容 IE，只能退回到 click + setTimeout(0) 延迟读取
- 不要监听整个 document，只观察具体
<details>元素，避免性能浪费
用CSS :has() 实现无JS状态样式（现代方案）
如果只是想做视觉反馈（比如箭头旋转、背景色变化），优先用 CSS，避免 JS 干预：
立即学习“前端免费学习笔记（深入）”；
details summary::marker {
content: "▶";
}
details[open] summary::marker {
content: "▼";
}
<p>/<em> 或用 transform </em>/
details summary {
transition: transform 0.2s;
}
details[open] summary {
transform: rotate(90deg);
}-
:has()目前在 Chrome 105+/Edge 105+/Safari 15.4+ 支持，Firefox 尚未支持 - 纯 CSS 方案不触发 JS，无事件监听开销，也不存在竞态问题
- 若需兼容老浏览器，仍需 fallback 到 JS + class 切换
实际项目中，多数场景用 click + open 判断就足够；只有当状态变化需要精确同步（比如配合动画库或第三方组件）时，才值得上 MutationObserver。别为一个不存在的 toggle 事件白费调试时间。
