是否展开由其 open 属性的布尔值决定；element.open 返回实时状态，toggle 事件监听切换，直接赋值 open = true/false 控制状态，避免 setattribute。
用 open 属性判断 <details></details> 是否展开
HTML 的 <details></details> 元素是否展开，直接由其 open 属性的布尔值决定。注意：它是个**反射属性（reflected attribute）**，不是 CSS 状态，也不依赖 class 或伪类。
获取方式很简单：
-
element.open返回布尔值：true表示当前展开，false表示收起 -
element.hasAttribute('open')也能用，但不推荐——它只检查初始 HTML 中是否写了open，无法反映用户交互后的实时状态 - 不要查
element.getAttribute('open')，它返回字符串""或null，语义模糊且易出错
监听展开/收起变化要用 toggle 事件
<details></details> 没有 open 或 close 事件，唯一可靠的事件是 toggle，它在用户点击或脚本触发 open 属性变更后触发。
示例：
const details = document.querySelector('details');
details.addEventListener('toggle', () => {
console.log('当前展开状态：', details.open);
});
注意点：
- 该事件不会在页面加载时触发（即使
open属性已存在），只响应状态切换 - 脚本中手动设置
details.open = true也会触发toggle，但需确保 DOM 已就绪 - 不支持 IE，现代浏览器均支持
用 JavaScript 控制展开状态要直接操作 open 属性
设置展开或收起，最直接的方式就是赋值 open 属性：
-
details.open = true→ 强制展开 -
details.open = false→ 强制收起 -
details.open = !details.open→ 切换状态（常用）
不要用 setAttribute('open', '') 或 removeAttribute('open')，它们会绕过属性反射机制，导致 details.open 值与视觉状态不一致（尤其在后续脚本读取时出错）。
兼容性与 SSR 场景下的坑
服务端渲染（如 Next.js、Nuxt）中，若 <details open></details> 在 HTML 中已存在，但 JS 尚未执行，details.open 读取为 true 是准确的；但要注意：
- 某些 hydration 框架可能重置元素状态，建议首次读取延迟到
DOMContentLoaded后 - SSR 输出不含
open但客户端想默认展开？不能靠 CSS 模拟，必须用 JS 设置open = true并触发一次toggle事件（如果逻辑依赖该事件） - 无障碍方面：
open属性会自动同步aria-expanded，无需手动维护
真正容易被忽略的是：toggle 事件没有取消机制，也无法阻止默认行为——它的触发完全由浏览器控制，你只能响应，不能干预展开/收起动作本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
