HTML5 的 <details> 和 <summary> 标签提供语义化、无障碍、免JS的折叠面板方案；支持默认收起/展开、任意HTML内容嵌套、自定义样式与旋转图标动画；手风琴需JS监听toggle事件实现单开互斥；平滑高度动画需用max-height模拟并补全ARIA属性。
HTML5 的 <details> 和 <summary> 标签就是专为折叠面板设计的原生方案，不用写 JavaScript、语义清晰、自带可访问性支持，直接用就能跑通基础交互。
用原生标签快速实现折叠效果
只需两个标签嵌套，结构干净，浏览器自动处理状态切换和键盘操作（空格/回车可触发）：
-
<details>是容器，代表一个可折叠区块； -
<summary>必须是它的第一个子元素，作为点击标题； - 不加
open属性，默认收起；加上就默认展开，比如<details open>； - 内容可以是任意 HTML：段落、列表、代码块、图片，甚至嵌套其他
<details>（但注意 Safari 对多层嵌套支持不稳定，建议单层优先）。
自定义样式与视觉反馈
原生箭头可替换，hover 和展开态样式都能控制，关键点在于避开浏览器限制：
- 先用
summary { list-style: none; }或summary::marker { content: ""; }隐藏默认图标； - 再用
summary::before插入自定义符号（如 ▶ 或 ⊕），配合transform: rotate()实现旋转动画； - 展开时用
details[open] summary::before触发旋转，例如转 90 度； - 加
transition: transform 0.3s让图标转动更顺滑； - 鼠标悬停时改边框色或背景色，提升交互提示感。
实现手风琴效果（单开互斥）
多个 <details> 默认独立，要“点一个、关其他”，得加几行 JS 监听 toggle 事件：
立即学习“前端免费学习笔记（深入）”；
- 监听每个
details的toggle（不是 click，否则键盘操作失效）； - 当某个面板展开（
details.open === true），遍历同组所有details，把其他都设为d.open = false； - 推荐用类名包裹一组，比如
<div class="accordion"></div>，然后查document.querySelectorAll('.accordion details')； - 动态插入的新面板需重新绑定，或改用事件委托（监听父容器的
toggle冒泡）。
添加平滑高度动画（进阶需求）
原生 <details> 不支持 height 过渡（因为 height: auto 无法 transition），要动画就得换思路：
- 放弃原生展开逻辑，改用
max-height + overflow: hidden模拟； - 给内容区设初始
max-height: 0，展开时 JS 获取其scrollHeight并赋值给max-height； - CSS 中写
transition: max-height 0.3s ease； - 收起后重置
max-height: 0，并确保overflow: hidden防滚动条残留； - 同时补上
aria-expanded和aria-controls，保证屏幕阅读器能识别状态。
