在html5中，标签默认折叠，添加open布尔属性可使其初始展开；可通过js动态设置open属性或检查状态；css可用details[open]选择器区分状态；现代浏览器支持良好，ie不支持需polyfill。

在HTML5中，<details></details> 标签默认是折叠的。若想让页面加载时就处于展开状态，只需为其添加 open 属性即可——这是一个布尔属性，存在即生效，无需赋值。

基础用法：直接添加 open 属性

最简单的方式是在 <details></details> 标签中写入 open：

<details open><summary>点击查看详情</summary><p>这是初始化时就可见的内容。</p>
</details>

浏览器会立即渲染为展开状态，用户无需点击即可看到 <summary></summary> 后面的内容。

与 JavaScript 配合动态控制

如果需要根据条件（如 URL 参数、用户偏好或表单状态）决定是否展开，可结合 JS 操作 open 属性：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 设置展开：element.open = true 或 element.setAttribute('open', '')
• 收起：element.open = false 或 element.removeAttribute('open')
• 检查当前状态：element.hasAttribute('open') 或直接读取 element.open（返回布尔值）

注意：直接修改 open 属性会立即触发 DOM 更新，无需手动刷新。

样式与可访问性注意事项

open 属性本身不影响样式，但可通过 CSS 区分展开/收起状态：

details[open] summary::after {
  content: " ▲"; /* 展开时显示向上箭头 */
}
details summary::after {
  content: " ▼"; /* 默认显示向下箭头 */
}

同时确保 <summary></summary> 文本清晰、有足够对比度，并支持键盘聚焦（Tab 可进入，Enter/Space 可切换），以满足无障碍要求。

兼容性提示

<details></details> 和 open 属性在现代浏览器中已广泛支持（Chrome 12+、Firefox 49+、Safari 6+、Edge 79+）。IE 完全不支持，如需兼容旧版 IE，应搭配 polyfill 或降级方案（如用 <div> + JS 模拟）。</div>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！