HTML折叠展开怎么默认展开？属性设置方法-html教程-PHP中文网

可使元素默认展开，open是布尔属性，存在即生效，不写则收起；写open="false"等仍强制展开；JS应操作el.open布尔值，监听toggle事件，CSS用details[open]选择器。

html折叠展开怎么默认展开？属性设置方法

用 `open` 属性让默认展开

直接在

标签上加 open 属性，就能让它一加载就处于展开状态。这是唯一标准、无需 JS 的方式。

常见错误是写成 open="true" 或 open="open" —— 这些都无效。open 是布尔属性，只写名字就行：

<details open><summary>标题</summary><p>默认就可见的内容</p>
</details>

open 必须直接写在开始标签里，不能用 JS 动态设置后再“触发”原生行为（那样会延迟一帧，且 Safari 下可能不渲染箭头）
多个都加 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

下载

不是的第一个子元素 —— 浏览器会忽略 open，甚至整个折叠逻辑失效（哪怕 DOM 看起来正常）
父容器用了 display: contents 或 contain: layout，导致的内部状态计算异常（尤其在 Safari 15.4–16.6 中有已知 bug）
页面通过 innerHTML 动态插入含 open 的，但未触发浏览器对新元素的解析（此时需手动调用 element.setAttribute('open', '')，再触发一次 toggle 事件）

默认展开 + 手风琴效果必须配合 JS

open 属性本身不提供互斥逻辑。想做到“点一个展开、其他收起”，即使全部初始带 open，也得靠 JS 控制：

监听每个的 toggle 事件（不是 click），确保键盘用户也能触发互斥
在事件回调里，用 detailsElement.open = false 关闭兄弟节点，而不是操作 className 或 style.display
注意：Safari 在 toggle 事件中读取 details.open 可能返回旧值，建议用 event.target.hasAttribute('open') 判断当前真实状态

兼容性兜底：IE 或旧 WebView 怎么办？

在 IE 全系完全不支持，部分 Android WebView（如 Android 4.4 KitKat）也无支持。若必须兼容：

不要尝试 polyfill 行为 —— 它依赖底层焦点管理和 ARIA 暴露，JS 模拟极易出可访问性问题
降级方案应改用 + + ARIA：aria-expanded、aria-controls、role="region" 缺一不可
检测方式用 'open' in document.createElement('details')，比 UA 判断更可靠


真正容易被忽略的是：即便现代浏览器全支持 open，如果你在 SSR 渲染中把 open 写成服务端生成的字符串（比如模板引擎里拼接 open="{{ isOpen }}"），而 isOpen 是 false，结果会变成 open="false" —— 这在 HTML 中仍是真值，面板照样展开。布尔属性只看是否存在，不看值。