HTML中details标签创建折叠内容的用法-html教程-PHP中文网

details 折叠功能无需 JS，但需确保 summary 是 details 的首个子元素、用 summary::before 自定义箭头、通过 open 属性控制状态、手动暂停内部媒体，并注意 iOS Safari 兼容性及表单同步。

html中details标签创建折叠内容的用法

details 标签本身就能实现折叠，不需要 JS，但写错结构、加错 CSS 或忽略兼容性细节，就会点不动、不收起、图标错位甚至在 Safari 里默认展开关不掉。

summary 必须是 details 的第一个子元素

这是最常踩的坑。只要 summary 被

、

 或其他块级标签包裹，或者它前面有空白文本节点，Safari 和旧版 Chrome 就可能完全忽略点击逻辑。
✅ 正确：标题
内容

❌ 错误：标题
内容

❌ 错误：标题


DOM 解析时的“第一个子节点”必须是 summary 元素节点，不能是文本节点（包括换行、空格）。

											
												
												
													HTML设计工具专业版
													企业级HTML/CSS设计系统,支持设计令牌、组件库、批量生成、主题切换与团队协作,适合团队与商业项目。
												
												下载
												
											
										
自定义箭头必须用 summary::before，别碰 ::marker

::marker 在 Safari ≤15.6、部分 Edge 和旧 Firefox 中不生效；::-webkit-details-marker 又只限 WebKit。统一用 summary::before 才能跨浏览器稳定显示和旋转。

先清空原生图标：summary { list-style: none; }

再加自定义图标：summary::before { content: "▶"; margin-right: 6px; transition: transform .2s; }

展开时旋转：details[open] > summary::before { transform: rotate(90deg); }

避免给 summary 设 display: inline-block 或 float，会破坏点击热区

JS 控制必须操作 open 属性，不是 style.display

直接改 style.display = 'block' 看似有效，但会绕过浏览器内置状态管理：屏幕阅读器读不出当前是否展开，toggle 事件不触发，键盘 Enter / Space 也无法切换。

✅ 正确切换：el.open = !el.open 或 el.toggleAttribute('open')

✅ 监听变化：el.addEventListener('toggle', () => console.log(el.open))

❌ 错误写法：el.style.display = el.open ? 'none' : 'block'

iOS Safari ≤15.4 不支持 open 属性初始值，需 JS 补：if ('open' in el && !el.hasAttribute('open')) el.open = false


折叠后的内容仍在运行，关键逻辑要手动暂停
details 只控制显隐，不暂停内部脚本、视频、音频或 iframe。比如折叠区域里有个 ，收起后依然在播放、消耗带宽。

监听 toggle 事件，在 !el.open 时手动 .pause()、.remove() 或 .src = ''

表单中用 details 包裹字段时，注意它不参与提交——需要同步状态得额外加 

服务端渲染页面时，若靠 JS 设置 open，可能出现“先闪一下收起再展开”，建议用 CSS 配合 :not([open]) > *:not(summary) 提前隐藏