可使元素默认展开，open是布尔属性，存在即生效，不写则收起；写open="false"等仍强制展开；JS应操作el.open布尔值，监听toggle事件，CSS用details[open]选择器。
用 open 属性让 <details></details> 默认展开
直接在 <details></details> 标签上加 open 属性，就能让它一加载就处于展开状态。这是唯一标准、无需 JS 的方式。
常见错误是写成 open="true" 或 open="open" —— 这些都无效。open 是布尔属性，只写名字就行：
<details open> <summary>标题</summary> <p>默认就可见的内容</p> </details>
-
open必须直接写在<details></details>开始标签里，不能用 JS 动态设置后再“触发”原生行为（那样会延迟一帧，且 Safari 下可能不渲染箭头） - 多个
<details></details>都加open，它们会**同时展开**，不会自动互斥 - 如果用了 JS 监听
toggle事件来实现手风琴效果，open属性仍有效，但 JS 需在首次加载时也同步处理状态（比如遍历所有details[open]并关闭兄弟节点）
为什么 open 不生效？检查这三点
最常遇到的不是属性写错，而是结构或环境问题：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
<summary></summary>不是<details></details>的第一个子元素 —— 浏览器会忽略open，甚至整个折叠逻辑失效（哪怕 DOM 看起来正常） - 父容器用了
display: contents或contain: layout，导致<details></details>的内部状态计算异常（尤其在 Safari 15.4–16.6 中有已知 bug） - 页面通过
innerHTML动态插入含open的<details></details>，但未触发浏览器对新元素的解析（此时需手动调用element.setAttribute('open', '')，再触发一次toggle事件）
默认展开 + 手风琴效果必须配合 JS
open 属性本身不提供互斥逻辑。想做到“点一个展开、其他收起”，即使全部初始带 open，也得靠 JS 控制：
- 监听每个
<details></details>的toggle事件（不是click），确保键盘用户也能触发互斥 - 在事件回调里，用
detailsElement.open = false关闭兄弟节点，而不是操作className或style.display - 注意：Safari 在
toggle事件中读取details.open可能返回旧值，建议用event.target.hasAttribute('open')判断当前真实状态
兼容性兜底：IE 或旧 WebView 怎么办？
<details></details> 在 IE 全系完全不支持，部分 Android WebView（如 Android 4.4 KitKat）也无支持。若必须兼容：
- 不要尝试 polyfill
<details></details>行为 —— 它依赖底层焦点管理和 ARIA 暴露，JS 模拟极易出可访问性问题 - 降级方案应改用
<button></button>+<div> + ARIA：<code>aria-expanded、aria-controls、role="region"缺一不可 - 检测方式用
'open' in document.createElement('details')，比 UA 判断更可靠
真正容易被忽略的是：即便现代浏览器全支持 open，如果你在 SSR 渲染中把 open 写成服务端生成的字符串（比如模板引擎里拼接 open="{{ isOpen }}"），而 isOpen 是 false，结果会变成 open="false" —— 这在 HTML 中仍是真值，面板照样展开。布尔属性只看是否存在，不看值。
