details/summary 是最直接方案，但需原生标签结构；若无法修改 HTML，则用 JS 动态计算 scrollHeight 配合 max-height 过渡实现平滑折叠动画，并注意键盘支持与焦点管理。
details 和 summary 是最直接的方案，但它们不能套在任意 div 上——必须用原生标签结构。如果你已有一堆带样式的 div，又不想改 HTML 结构，就得用 JS + CSS 控制 max-height。
为什么不能直接用 display: none / block 做过渡动画
因为 display 属性本身不支持 CSS transition，切过去就是瞬时显隐，没有滑动或淡入效果。强行加 transition 无效，浏览器会忽略。
- 想有动画，必须用可过渡的属性：比如
max-height、opacity或transform -
max-height最常用，但它需要一个“足够大但不过大”的固定值（如max-height: 500px），否则过渡会卡顿或失效 - 如果内容高度差异大（比如有的面板只有一行，有的含图片+列表），硬写死
max-height容易撑开或截断
用 JavaScript 动态计算 scrollHeight 实现真实高度过渡
避免写死 max-height 的关键，是读取元素的 scrollHeight 并设为过渡目标值。注意：必须先让元素可见（height: auto）才能准确读取，再立刻设回 max-height 并触发重排。
- 初始状态：
max-height: 0; overflow: hidden; - 展开时：先临时设
height: auto→ 读element.scrollHeight→ 设max-height为目标值 → 移除height: auto - 收起时：直接设
max-height: 0，过渡结束后可加overflow: hidden防抖动 - 别忘了在
transitionend里清理内联样式，否则下次切换可能出错
用 classList.toggle 配合 CSS 控制状态比内联 style 更可靠
直接操作 element.style.maxHeight 容易和外部 CSS 冲突，也难维护。推荐用 class 切换驱动状态，把样式逻辑全交给 CSS。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 给内容容器加基础类：
.collapsible { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; } - 展开状态类：
.collapsible.is-open { max-height: 500px; }（仍建议配合 JS 动态设具体值） - 触发按钮绑定 click 后，用
el.classList.toggle('is-open')，再由 JS 补充高度计算逻辑 - 这样样式和行为分离，调试时一眼看出当前状态，也方便用 DevTools 模拟开关
容易被忽略的细节：focus 管理与键盘支持
纯靠 div + click 的方案，默认不响应空格键或回车键，对键盘用户不友好。如果面板标题是 button 或加了 tabindex="0" 的 div，记得手动监听 keydown：
- 检测
event.key === 'Enter' || event.key === ' '（空格） - 调用同个展开/收起函数，保持行为一致
- 展开后，若内容区有可聚焦元素（如链接、输入框），最好自动
focus()进去 - 否则屏幕阅读器可能卡在标题，不知道内容已变化
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
