details + summary 是移动端手风琴最轻量、语义正确且无需 JS 的方案，现代浏览器均支持，IE 和旧版 Edge 不支持；需严格遵循结构、重置样式并用 toggle 事件实现单开。
details + summary 是移动端手风琴最轻量、语义正确且无需 JS 就能工作的方案，现代浏览器（Chrome 12+、Firefox 49+、Safari 6.1+、Edge 79+）全部支持，但 IE 和旧版 Edge 不行。
用 details 实现原生折叠，不写 JS 也能响应空格/回车
它不是“模拟”展开，而是浏览器原生行为：点击 summary、按空格键或回车键都会触发切换，屏幕阅读器能识别状态变化，无障碍达标。结构必须严格：
-
summary必须是details的第一个子元素，否则部分 Safari/旧 Chrome 不响应点击区域 - 默认收起，加
open属性才初始展开：标题
内容
- 内容区域直接写在
summary后面，不用额外包裹div，也不用设height: 0或overflow: hidden - 多个
details并列时互不干扰——这是默认行为，想单开才需要 JS
移动端 CSS 样式重置避坑点
原生 summary 在不同浏览器表现不一：Chrome/Firefox 默认有 ::marker 三角，Safari 还多一条下划线，直接用会显得割裂。关键重置项：
- 先清掉默认 marker：
summary { list-style: none; }（Safari 下这步不能省） - 再用
::marker或::after统一图标：summary::after { content: "▼"; margin-left: 4px; transition: transform 0.2s; } - 展开时旋转：
details[open] summary::after { transform: rotate(180deg); } - 禁用 Safari 下划线：
summary { text-decoration: none; } - 移动端点击反馈弱？加
summary { -webkit-tap-highlight-color: rgba(0,0,0,0.1); }
要单开（手风琴互斥），JS 必须监听 toggle 事件
别用 click——键盘用户按空格/回车不会触发，toggle 才是 details 专属事件，能准确捕获状态变更。逻辑重点不是“打开这个”，而是“关掉其他”：
- 缓存所有面板节点，避免每次遍历：
const panels = document.querySelectorAll('details'); - 监听时加防抖判断：
if (e.target.open) { panels.forEach(p => p !== e.target && (p.open = false)); } - 避免鼠标悬停瞬间误关：可加
:hover排除，或用setTimeout延迟关闭（更稳妥） - 如果页面有上百个面板，建议只对可视区内的节点绑定事件，减少性能压力
动画用 max-height 过渡，但别硬写 9999px
原生 details 没内置过渡，得靠 CSS 补。直接设 height: auto 无法过渡，必须用 max-height。但上限值写太小会截断内容，写太大动画拖沓：
- 推荐预估一个安全值，比如
max-height: 600px（够撑开 3–4 段文字 + 图片） - 给内容区加
overflow: hidden，否则动画中内容可能溢出 - 过渡加在
details[open] summary ~ *上，精准控制后续兄弟元素（即内容区域） - 若内容含图片且加载慢，首次展开可能高度计算滞后——加
padding-bottom: 1px可强制重排微调
真正容易被忽略的是：移动端 Safari 对 ::marker 支持不稳定，list-style: none 必须显式写；另外，details 在 iOS 微信 WebView 中偶有 focus 状态残留，加 summary:focus { outline: none; } 更稳妥。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
