原生 details 元素可零 JS 实现折叠，但默认允许多开；需监听 toggle 事件并手动控制 open 属性以实现单开手风琴效果，配合 max-height 动画或 opacity/scaleY 更稳妥；MultiClamp 适用于多行文本截断，与 details 职责分离。
用 details 实现零 JS 折叠，但别指望它自动单开
现代浏览器（Chrome 12+、Firefox 49+、Safari 6.1+）原生支持 details，点 summary 就能展开/收起，键盘操作也无障碍——这是最轻量、语义最正的起点。但它默认允许多个同时展开，不是“手风琴”。想单开必须加 JS 控制 open 属性，不能只靠 HTML。
让多个 details 互斥：监听 toggle，别用 click
要实现“点一个、其他关闭”，必须监听 toggle 事件——它在用户点击、空格、回车时都会触发；click 会漏掉键盘操作，导致屏幕阅读器或键盘用户状态不同步。
- 给所有面板加统一 class，比如
class="accordion-item"，方便选择 - 只在当前项
open === true时，遍历同组所有details，对非当前项调用.removeAttribute('open')（别用.open = false，后者会再触发一次toggle） - 动态插入的新
details需重新绑定，或改用事件委托（监听父容器上的toggle）
加平滑动画：用 max-height + JS 测高，别硬写死
details 原生无 height 过渡效果，因为 height: auto 无法 transition。稳妥做法是 JS 在展开前读取目标内容的 scrollHeight，设为 max-height；收起时设为 0。
-
overflow: hidden必须始终存在，否则动画中内容会溢出 - 避免直接写
max-height: 500px——长内容会被截断，短内容动画拖沓 - 如果只求视觉干净，
opacity+transform: scaleY()更可靠，无需测量
用 MultiClamp 截断多行文本再展开，注意初始化时机
当需求是“默认显示 2 行 + ‘阅读更多’按钮”，而不是整块折叠，MultiClamp 比 details 更贴切。它通过 JS 计算行高并截断，支持自定义省略符。
- 必须等 DOM 渲染完成、字体加载完毕后再调用
multiClamp(element, { lines: 2 })，否则行高计算不准 - 内容动态更新后，需手动调用
multiClamp.reload(element)重算 - 别把
MultiClamp和details混用——前者管文本截断，后者管区块显隐，职责不同
细节容易被忽略：用 details 时，summary 必须是第一个直接子元素，中间不能有空格或换行；用 MultiClamp 时，若文本含 emoji 或变体字体，getBoundingClientRect() 测高可能偏差，得加容错 fallback。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
