优先用details+summary实现基础折叠，因其语义化、无障碍且无需JS；但响应式控制、动画、小屏自动收起等需JS配合max-height与类名切换，因details不支持height过渡、open操作在Safari有延迟、summary::marker样式覆盖受限、无法监听展开事件且高度变化不触发重排。
用 details + summary 最快实现基础响应式折叠，但真要控制展开状态、加动画、适配小屏收起再点击展开，必须靠 JS 配合 max-height 和类名切换。
为什么 details 不能直接当响应式折叠组件用
它默认支持点击切换、键盘可访问、语义正确，但有几个硬伤：不支持 CSS 控制初始展开/收起（open 属性在 Safari 旧版有 JS 操作延迟）；无法监听展开后事件；summary::marker 在 Safari 中样式覆盖失效；最关键是——details 内容高度变化不触发重排，transition 对它完全无效。
常见错误现象：details[open] { transition: height 0.3s; } 完全没动画，因为浏览器根本不允许对 height 做过渡，且原生逻辑绕过了你写的 CSS。
- 想在移动端小屏自动收起侧边栏？
details不会响应@media切换状态 - 需要点击遮罩层关闭已展开项？
details没提供 API 监听“是否已展开” - 内容含图片或异步加载文本，高度动态变化？
details不会重新计算高度动画
max-height 动画怎么写才不卡顿不截断
核心是：别碰 height: auto，它不能过渡；也别设 max-height: none，它会破坏过渡链。必须用一个“够大但确定”的像素值，再配合 overflow: hidden。
安全做法：
- 预估最大高度：比如最多 8 行文字 × 行高 24px ≈ 200px，就设
max-height: 200px - 内容高度差异大？改用
600px或100vh（但后者在弹窗里可能溢出） - CSS 必须同时写：
overflow: hidden（否则内容会撑开容器导致跳变） - 过渡只声明需要的属性：
transition: max-height 0.3s ease-out, opacity 0.2s ease-in，避免all触发意外重绘
如果内容高度不可预估（比如加载完才插入 DOM），就得 JS 动态读取：element.scrollHeight，但注意时机——得先确保元素已渲染、图片已加载，否则读出来是 0。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
JS 切换状态时容易漏掉的三件事
不是简单 classList.toggle('open') 就完事。下面这些步骤漏一个，动画就卡住或错乱：
- 收起前必须先设
max-height: 0，再强制重排（例如读一次offsetHeight），否则浏览器跳过过渡 - 展开时不能直接设
max-height: element.scrollHeight + 'px'，得等上一步重排完成后再赋值（可用setTimeout(..., 0)或requestAnimationFrame） - 动画结束后，建议清除内联
max-height并设回none，否则后续 JS 调用scrollHeight可能被这个固定值干扰 - 如果多个折叠项互斥（点 A 收起 B），别用
querySelectorAll('.item').forEach(...)遍历关，改用事件委托 +closest()定位当前父容器更轻量
移动端点击穿透和 focus 残留怎么防
在 iOS Safari 或部分安卓 WebView 中，用 label + checkbox 模拟折叠按钮时，常出现点一下没反应、连点两下才生效、或者菜单关不掉——根本原因是焦点没释放。
解决方式很具体：
- 点击后立刻调用
event.target.blur()，尤其对label或自定义按钮 - 避免在
label里嵌套其他可交互元素（比如a标签），否则点击可能触发两次事件 - 如果用了
checkbox+:checked纯 CSS 方案，记得加tabindex="-1"防止键盘聚焦干扰 - 测试时别只看 Chrome，一定要在真机 Safari 上验证
click和touchend的触发顺序
真正难的不是写出能动的代码，而是让 scrollHeight 读得准、transition 触发稳、focus 不残留——这三处细节一错，整个折叠体验就碎了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
