用data-target绑定按钮与目标元素，JS读scrollHeight设max-height实现平滑过渡，事件委托统一处理，加class同步状态并适配移动端touch事件。
点击按钮只收起/展开特定区域，不刷新页面
直接用 details + summary 最省事，但控制粒度粗（只能整块折叠）、样式难定制。真要按钮驱动、精准控制某段内容，就得靠 JS 操作 display 或 max-height，配合 class 切换。
关键不是“怎么写按钮”，而是“怎么让按钮和目标元素建立可靠绑定”。常见错误是硬编码 ID、多个按钮复用同一 ID、或用 getElementsByClassName 返回 NodeList 时没遍历就调用 style —— 直接报错 Cannot set properties of undefined。
- 每个按钮必须通过
data-target属性明确指向一个唯一id，比如<button data-target="section-1"> - 被控制的区域必须有对应
id="section-1"，且初始状态建议设为style="display: none;"或加class="collapsed" - JS 里用
document.querySelector查data-target值，再用document.getElementById找目标，比用 class 名更稳
用 max-height 实现带过渡的平滑展开
display: none ↔ block 切换没法加 CSS 过渡，视觉上是突兀闪现。想有动画效果，得改用 max-height 配合 overflow: hidden。
但注意：不能直接设 max-height: 0 → max-height: 500px，因为真实高度不确定。稳妥做法是先用 JS 读取目标元素 scrollHeight，再设为 max-height 值。
立即学习“前端免费学习笔记（深入）”；
- 展开前：先设
max-height为0，overflow: hidden - 展开时：先强制重排（
offsetHeight触发），再设max-height为target.scrollHeight - 收起时：设回
max-height: 0，过渡结束后再设display: none（可选，避免占布局空间） - CSS 里统一写
transition: max-height 0.3s ease-in-out
多个折叠区域共用同一套 JS 逻辑
不用给每个按钮写独立事件监听。用事件委托，监听父容器（比如 class="accordion"）上的 click，再判断是否点中了带 data-target 的按钮。
这样增删折叠项只需改 HTML，JS 完全不用动。但容易漏掉的是：没阻止 summary 默认行为（如果用了 details），或按钮在 label 里导致两次触发。
- 绑定监听时用
document.addEventListener('click', handler)，handler 里用event.target.matches('[data-target]')判断 - 开头加
if (!target.hasAttribute('data-target')) return;快速过滤 - 记得
event.preventDefault()，尤其按钮在表单内或label中时 - 状态同步靠 class：展开时加
expanded，收起时移除——方便 CSS 控制箭头旋转等视觉反馈
移动端点击无响应或延迟？检查这三点
iOS Safari 和部分安卓浏览器对 click 有 300ms 延迟，或对空按钮（没文字、纯图标）识别率低。这不是 JS 写错了，是交互层没适配。
- 按钮必须有
cursor: pointer和足够点击热区（至少 44×44px），用padding不要用margin - 加
touchstart事件替代click，或用fastclick库（但现代浏览器基本不需要） - 避免在
click回调里做大量计算，否则卡顿会让人觉得“点不动”；DOM 更新后立刻requestAnimationFrame切换 class
折叠展开看着简单，真正线上跑起来，90% 问题出在目标元素没正确获取、过渡值没重排、或者移动端 touch 事件没兜住。别急着封装组件，先拿一个按钮一个区域跑通全流程。
