details 标签需严格遵循 DOM 结构规范，summary 必须是 details 的第一个元素节点，CSS 自定义箭头应使用 summary::before，JS 控制必须操作 open 属性而非 display，且需手动暂停折叠内容中的媒体与脚本。
details 标签本身不带现代感，靠 CSS 重写才能达到设计稿要求——但直接改 ::marker 或用 display: inline-block 在 summary 上，大概率让点击失效、Safari 默认展开关不掉、箭头错位。
summary 必须是 details 的第一个子元素，空格和换行也算违规
DOM 解析时，summary 必须是 details 的**第一个子节点（element node）**，不能被任何文本节点（包括换行、空格、HTML 注释）或其它标签包裹。
- ✅ 正确：
<details><summary>标题</summary><p>内容</p></details> - ❌ 错误：
<details><!-- 注释 --><summary>标题</summary></details>（注释是文本节点） - ❌ 错误：
<details><div><summary>标题</summary></div><p>内容</p></details>（summary不是直接子元素） - 错误后果：Safari 和旧版 Chrome 完全忽略点击逻辑，键盘 Space/Enter 也无效
自定义箭头必须用 summary::before，别碰 ::marker
::marker 在 Safari ≤15.6、部分 Edge 和老 Firefox 中不渲染；::-webkit-details-marker 只对 WebKit 有效。唯一跨浏览器稳定的方案是清掉原生标记，再用 ::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
直接设 el.style.display = 'none' 看似能隐藏内容，但绕过了浏览器内置状态管理：屏幕阅读器读不出当前状态，toggle 事件不触发，键盘操作失灵。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确切换：
el.open = !el.open或el.toggleAttribute('open') - ✅ 监听变化：
el.addEventListener('toggle', () => console.log(el.open)) - ❌ 错误写法：
el.style.display = el.open ? 'block' : 'none' - iOS Safari ≤15.4 对 JS 设置
open属性有延迟，建议加兜底：if ('open' in el && !el.hasAttribute('open')) el.open = false
折叠后的内容仍在运行，关键逻辑要手动暂停
details 只控制显隐，不暂停内部脚本、视频、音频或 iframe。比如收起时 <video autoplay> 依然在播放。
- 监听
toggle事件，在!el.open时手动调用.pause()、清空.src或移除iframe - 表单中用
details包裹字段时，它不参与提交——需要同步值到外层表单控件，否则后端收不到 - 嵌套超过两层时，Safari 对
toggle事件的冒泡行为不稳定，建议限制嵌套深度
最易被忽略的点是：结构合法 ≠ 行为可靠。哪怕 HTML 写对了，CSS 里一行 display: inline-block 或 JS 里一次 style.display 操作，就足以让整个交互在 iOS 或辅助技术下崩掉。
