HTML代码折叠实现方法全解析

用

和

快速实现原生折叠

这是 HTML5 原生支持的语义化方案，开箱即用，键盘可访问，屏幕阅读器友好，且默认带三角指示符和基础过渡。

• 把要折叠的内容包进
  ，标题行必须是它的第一个子元素且为
• 加 open 属性可默认展开：
  配置项

  ...

• 浏览器对 max-height 或 display 不做动画，所以原生折叠没有滑动效果，只有显隐切换
• CSS 中可用 details[open] > summary 控制展开态样式，summary::marker 可隐藏/替换三角图标

用 max-height + transition 实现平滑滑动效果

当需要视觉上“滑出”“收起”的动画时，不能依赖 display: none（它无法过渡），而要用 max-height 配合溢出控制。

• 初始状态设 max-height: 0; overflow: hidden;，展开时设为一个足够大的值（如 max-height: 500px）
• 必须配 transition: max-height 0.3s ease-in-out;，否则无动画
• 内容高度不确定时，避免用 height: auto（不能过渡），改用预估的 max-height 上限值，否则动画会卡顿或失效
• JS 切换时推荐用 element.classList.toggle('open')，再由 CSS 控制状态，比内联 style 更易维护

为什么不用 display 或 visibility 做折叠动画

这是新手最常踩的坑：直接写 display: none → block 或 visibility: hidden → visible 看似简单，但会导致两个问题：

• display 属性不可过渡，浏览器会立刻切换，没有中间帧
• visibility 虽可过渡，但元素仍占布局空间，折叠后页面留白，体验割裂
• 若内容含图片或字体加载中，max-height 方案可能因高度估算不准导致动画提前结束——此时应监听 load 事件后重设高度，或改用 transform: scaleY() + overflow: hidden

在 Markdown 渲染页里插入折叠块要注意什么

很多静态博客（Hexo、Hugo、VuePress）支持在 Markdown 中混写 HTML，但需注意解析器是否剥离或转义