使用 <details> 和 <summary> 可实现无 JS 折叠展开，语义清晰、无障碍友好；默认收起，加 open 属性可默认展开；通过 CSS 可自定义箭头图标与滑动动画。
直接用 <details> 和 <summary> 标签就能做出折叠展开效果，不用写 JavaScript，语义清晰、键盘可操作、屏幕阅读器也认得。
基础写法：三行搞定
把标题放进 <summary>，内容放在它后面、</details> 前面就行：
<details><summary>常见问题</summary><p>答案在这里</p></details>- 页面加载后默认收起，点标题就展开，再点收起
- 浏览器自动加小三角图标，有基础交互反馈
默认展开：加一个 open 属性
想一上来就显示内容，给 <details> 加上 open：
<details open><summary>配置说明</summary><p>这部分很重要，所以默认可见</p></details>- 适合错误日志、关键提示、默认选中的高级选项等场景
去掉默认箭头，换自己的图标
用 CSS 隐藏原生标记，再用伪元素加自定义符号：
立即学习“前端免费学习笔记（深入）”；
- 先清空默认样式：
summary { list-style: none; } - 加右向箭头：
summary::after { content: "▶"; margin-left: 8px; } - 展开时变下箭头：
details[open] summary::after { content: "▼"; } - 加上
transition: transform 0.2s还能让图标旋转，更顺滑
加滑动动画：靠 max-height 过渡
原生 <details> 没有滑动效果，只做显隐切换。要滑出滑入，得自己加 CSS 动画：
- 给内容部分设初始状态：
details > *:not(summary) { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } - 展开时撑开：
details[open] > *:not(summary) { max-height: 500px; } - 注意：不能用
height: auto，必须填一个足够大的固定值（比如 500px），否则过渡会失效
