<details>和<summary>是HTML5原生折叠组件，语义清晰、无需JS、支持键盘操作；<summary>必须为<details>首个子元素，加open属性可默认展开；不支持IE，Edge 15+及主流移动端浏览器均兼容。
details 和 summary 是 HTML5 原生折叠组件
直接用，不用 JS 就能实现点击展开/收起，语义清晰、可访问性好、自带键盘支持（空格/回车触发）。<details> 是容器，<summary> 是标题栏，必须是它的第一个子元素。
常见错误：把 <summary> 写在 <details> 外面，或中间插了其他元素——浏览器会忽略或降级为普通文本。
-
<details>默认收起，加open属性可默认展开：<details open> -
<summary>里可以放文字、图标甚至<span>，但别套<div>（非流式内容，可能破坏可访问性） - 不支持 IE，Edge 15+ 开始支持；移动端 Safari/Chrome 都没问题
<details> <summary>点击展开说明</summary> <p>这里是折叠的内容，可以是段落、列表、表格……</p> </details>
HTML4 时代没 details，靠 JS + CSS 模拟
那时候只能手动控制 class 切换（比如 is-open），再用 CSS 控制 max-height 或 display。核心难点不在“怎么写”，而在“怎么写得健壮”。
典型陷阱：display: none 切换会导致重排、焦点丢失、屏幕阅读器跳过；用 max-height: 0 + 过渡动画更平滑，但要预估最大高度（设太小会截断，太大动画卡顿）。
立即学习“前端免费学习笔记（深入）”；
- 必须监听
click并调用preventDefault()，否则<a>标签会跳转 - 用
aria-expanded和aria-controls手动补全可访问性，否则读屏软件不知道状态 - 如果内容高度动态（比如含图片加载后撑开），纯 CSS 动画会失效，必须 JS 测高或改用
height: auto+scrollHeight计算
summary 的箭头样式怎么改？别用 background-image
浏览器对 <summary> 自带一个下拉箭头（WebKit 内核显示为三角，Firefox 是右侧小点），想自定义得覆盖伪元素。关键是：不同引擎用的伪元素名不一样。
- Chrome/Safari 用
::marker（较新标准，但 Safari 15.4+ 才稳定支持） - 旧版 WebKit 用
::-webkit-details-marker - Firefox 不支持
::marker时，得靠list-style: none+::before手动加图标
最稳妥写法是先清空原生标记，再统一用 ::before：
summary {
list-style: none;
}
summary::before {
content: "▶";
margin-right: 6px;
transition: transform 0.2s;
}
details[open] > summary::before {
transform: rotate(90deg);
}
折叠菜单用 details 是否适合生产环境？看场景
如果是简单文档侧边栏、FAQ、设置项分组，<details> 完全够用，代码少、维护成本低、SEO 友好（所有内容都在 DOM 里）。
但如果菜单需要多级嵌套（比如三级导航）、带图标/徽标/禁用态、或要求动画与路由联动（如 Vue Router 激活高亮），就别硬套——<details> 不提供事件钩子，也不支持受控模式，强行 patch 容易失控。
这时候该上轻量 JS 库（如 accordion-js）或框架组件（<el-collapse> / <Accordion>），而不是反复魔改原生标签。
