MutationObserver是监听details元素open状态变化的唯一可靠方式，需配置attributes:true、attributeFilter:['open']和attributeOldValue:true，通过对比mutation.oldValue与details.hasAttribute('open')精准捕获状态变更。
details元素默认展开后，JS怎么监听open状态变化
直接给 <details open> 加了 open 属性，页面加载时确实展开了，但 JS 用 details.open 读出来是 true，可绑定 toggle 事件却收不到初始展开的触发——因为 toggle 只在用户点击或 JS 主动切换时触发，不响应初始渲染状态。
监听open状态变化的正确方式：用MutationObserver监听open属性变更
toggle 事件不可靠，尤其对服务端渲染或初始 open 的场景。真正能捕获“从无到有”或“有到无”的 open 状态变化，得监听 DOM 属性变动：
-
details元素的open属性是布尔反射属性，增删它会触发attributeChanged回调 - 必须用
MutationObserver监听attributes，且指定attributeFilter: ['open'] - 不能只依赖
details.open的读取值，要对比mutation.oldValue和当前details.hasAttribute('open')
const details = document.querySelector('details');
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.attributeName === 'open') {
const isOpen = details.hasAttribute('open');
console.log('open 状态变为：', isOpen);
}
});
});
observer.observe(details, { attributes: true, attributeFilter: ['open'], attributeOldValue: true });
为什么不用click或focus事件模拟监听
有人试图监听 click 或 focus 来推断展开/收起，这不可靠：
-
details的 summary 可能被tab键聚焦再回车展开，此时无click - JS 调用
details.setAttribute('open', '')或details.removeAttribute('open')不触发click - 屏幕阅读器用户可能用快捷键操作，完全绕过鼠标事件
- 部分浏览器（如 Safari）对
summary的点击冒泡行为不一致
兼容性注意点和替代方案
MutationObserver 在 IE11 中不支持，若需兼容旧版，可用降级方案：
立即学习“前端免费学习笔记（深入）”；
- IE11 及以下：改用轮询
setInterval检查details.hasAttribute('open')，间隔设为 50ms 以内（但不推荐长期使用） - 注意：
details.open属性在所有现代浏览器中都同步反映 DOM 属性状态，但读取时机很重要——必须等 DOM 完全解析后再取值，否则可能拿到false（即使写了open） - 如果用框架（如 Vue/React），优先用响应式数据绑定，而非手动监听 DOM 属性
真正容易被忽略的是：toggle 事件无法区分“用户操作”和“JS 设置”，而业务逻辑往往需要精确知道 open 状态何时、因何改变——这时候，MutationObserver 是唯一能覆盖全部路径的方案。
