原生 details + summary 最快实现手风琴效果，无需 JS 或 CSS 框架；默认单开、语义化、兼容主流浏览器；动画需用 max-height + overflow 配合过渡，避免直接操作 height 或 open 属性。
用 details 和 summary 最快实现手风琴效果
原生 HTML 就能做，不需要 JS 或 CSS 框架。浏览器支持已很成熟（Chrome 12+、Firefox 49+、Safari 6+、Edge 79+），连 iOS Safari 都没问题。
关键不是“怎么加动画”，而是先让折叠逻辑跑通——details 默认就是单个展开、点击收起、支持空内容、天然语义化。
-
details元素默认闭合；加open属性可默认展开 -
summary必须是details的第一个子元素，且只能有一个 - 点击
summary会自动切换open状态，无需监听事件 - 不支持多选展开（即多个
details同时打开）是默认行为，符合多数手风琴需求
加 CSS 过渡动画要绕开 details 的 height 限制
details 内容区域没有固定高度，直接对 height 加 transition 无效——因为从 auto 到具体值无法插值。
常见错误写法：details[open] { height: auto; transition: height 0.3s; } —— 这不会动。
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 正确做法：用
max-height+overflow: hidden模拟高度过渡 - 设一个足够大的
max-height（比如500px），确保内容能完全显示 - 闭合时设
max-height: 0，同时padding和opacity一起过渡更自然 - 注意：若内容高度超过预设的
max-height，会截断，所以得估个安全上限
需要 JS 控制时，别直接操作 open 属性，用 toggleAttribute
手动触发展开/收起（比如外部按钮控制某个 details）时，避免用 elem.open = true，它在部分 Safari 版本中不触发重绘。
更稳妥的方式是操作 DOM 属性：
const accordion = document.querySelector('#faq-1');
accordion.toggleAttribute('open');
-
toggleAttribute兼容性好（IE 不支持，但现代项目基本不需考虑） - 如果必须兼容旧浏览器，改用
accordion.setAttribute('open', '')/accordion.removeAttribute('open') - 不要监听
click事件去手动切换——summary自带行为已覆盖，重复监听反而容易冲突
移动端点击区域太小？给 summary 加 padding 别碰 line-height
默认 summary 是行内元素，点击热区窄，尤其在手机上容易点不准。
- 用
display: block+padding扩展可点击区域，比调line-height更可靠 - 避免给
summary设min-height或height，可能破坏默认箭头定位 - 如需隐藏原生箭头，用
summary::marker { display: none; }，再用伪元素或背景图自定义 - 注意：iOS Safari 中，
summary的点击反馈有轻微延迟，加cursor: pointer可提升感知响应
真正难的不是“怎么展开”，而是内容高度不确定时如何让动画看起来自然——max-height 的取值、过渡时长、是否配合 opacity，这些细节组合起来才决定用户觉得“顺不顺”。
