和是语义正确、无需js的折叠面板方案，但safari不支持summary::marker自定义箭头；必须为的第一个子元素；默认收起，加open属性可默认展开；隐藏原生箭头推荐list-style:none；旋转动画需用summary::before配合details[open]实现；height/max-height过渡无效，需js模拟；嵌套不推荐；open状态需localstorage手动持久化。
details 和 summary 是最简原生方案，但 Safari 对图标支持差
直接用 <details></details> + <summary></summary> 就能实现无 JS 折叠面板，语义正确、键盘可访问、屏幕阅读器识别自然。但别指望它在所有浏览器里长得一样——Safari 会忽略 summary::marker 的 content 设置，导致自定义箭头失效。
常见错误是写成：<details><div><summary>标题</summary></div>内容</details>。这不行，<summary></summary> 必须是 <details></details> 的**第一个子元素**，否则点击无响应。
- 默认收起：直接写
<details><summary>标题</summary>内容</details> - 默认展开：加
open属性，即<details open><summary>标题</summary>内容</details> - 隐藏原生箭头：用
summary { list-style: none; }更稳妥；summary::marker { content: ""; }在 Chrome/Firefox 有效，Safari 需额外补图标
想加旋转图标动画？得用 summary::before + details[open]
原生 <summary></summary> 不支持 transition，但可以用 CSS 自定义伪元素模拟旋转效果。关键不是“动箭头”，而是靠状态选择器切换样式。
示例代码片段：
summary {
list-style: none;
position: relative;
}
summary::before {
content: "▶";
display: inline-block;
margin-right: 8px;
transition: transform 0.2s ease;
}
details[open] summary::before {
transform: rotate(90deg);
}
注意点：
- 别用
unicode字符（如\25B6）当 content，部分字体下渲染异常 -
transform: rotate()必须配合display: inline-block或inline-flex才生效 - 不要给
<details></details>设height或max-height过渡——它不认，强行加只会让内容突然跳变
需要平滑高度过渡？原生 details 就该换 JS 方案
<details></details> 本身不支持 transition，任何基于 height 或 max-height 的动画都会失效。你看到的“渐变展开”效果，基本都是 JS 控制类名 + CSS 切换 max-height 值模拟出来的。
如果坚持用原生标签还想有动画，唯一可行路径是：
- 监听
toggle事件：details.addEventListener('toggle', () => {...}) - 在事件中手动添加/移除类，比如
is-open - 用
getBoundingClientRect().height或scrollHeight动态读取内容高度，再设为max-height
但这已经脱离了原生交互逻辑——你等于自己重写了折叠行为，只借了个 HTML 标签壳子。
嵌套 details 会出问题，多层折叠别硬扛
规范没要求支持嵌套，实际测试中，Chrome 和 Firefox 偶尔能跑通一层嵌套，但 Safari 直接忽略内层 <summary></summary> 的点击。更麻烦的是，嵌套后焦点管理混乱，键盘用户按 Tab 键可能跳过中间层级。
如果你真需要多级折叠（比如 FAQ 下再分小类），建议：
- 外层用
<details></details>，内层改用 JS 实现的accordion组件 - 或统一用 JS 方案，保持行为一致，也方便加手风琴逻辑（点击一个，自动收起其他）
- 别为了“语义正确”牺牲可用性——可访问性 ≠ 死守某个标签，而在于焦点流、ARIA 属性和键盘操作完整
最常被忽略的一点：原生 <details></details> 的 open 状态不会被浏览器持久化，刷新页面就重置。如果需要记住用户上次展开的是哪个，必须自己存 localStorage 并手动恢复。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
