HTML展开与折叠功能实现方法

用

和

快速实现可访问折叠

这是唯一被 HTML 标准支持的语义化折叠方案，自带 ARIA 属性、键盘支持（空格/回车触发）、无需 JS。

• 内容默认显示，点击后展开/收起

  的其余子内容
• 默认有箭头图标（不同浏览器样式不同），可用 ::marker 或 list-style 覆盖
• 加 open 属性可默认展开：
• 不支持 CSS 过渡动画（height 无法过渡），如需淡入/滑动效果，必须换方案

<details>
  <summary>点击查看说明</summary>
  <p>这里是被折叠的详细内容，支持任意 HTML 元素。</p>
</details>

用 JavaScript + max-height 实现带动画的展开收起

当需要平滑高度过渡（比如从 0 → 自适应高度）时，不能直接对 height: auto 做 transition，得用 max-height 模拟，或用 JS 测量真实高度。

• 设初始 max-height: 0，溢出隐藏；展开时设为一个足够大的值（如 max-height: 500px），再用 transition 过渡
• 更精确的做法：JS 先设 height: auto，读取 offsetHeight，再设回 max-height 并触发 transition
• 注意：内容高度变化时（如图片加载、字体渲染完成），可能需重新测量
• 记得在收起后清除 max-height 并设 overflow: hidden，否则影响布局

const toggleBtn = document.querySelector('.toggle-btn');
const content = document.querySelector('.fold-content');

toggleBtn.addEventListener('click', () => {
  const isOpen = content.style.maxHeight;
  if (isOpen) {
    content.style.maxHeight = '0';
    content.style.overflow = 'hidden';
  } else {
    content.style.maxHeight = content.scrollHeight + 'px';
    content.style.overflow = 'visible';
  }
});

用 CSS visibility + transform 模拟折叠（适合固定高度内容）

如果折叠区域高度固定（比如统一 120px），可以用 visibility + transform: scaleY() 实现带缩放感的展开动画，性能比 max-height 更好。

• transform: scaleY(0) 配合 visibility: hidden 完全隐藏，且不占文档流
• transition transform 和 visibility（visibility 不能过渡，需配合 opacity 或延迟切换）
• 缺点：只适用于已知高度或能接受裁剪的内容；scaleY(0) 会压缩内部文字，可能影响可读性
• 不推荐用于长文本或动态内容，语义性和可访问性弱于

.fold-content {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.fold-content.closed {
  transform: scaleY(0);
  opacity: 0;
  visibility: hidden;
}
.fold-content.open {
  transform: scaleY(1);
  opacity: 1;
  visibility: visible;
}

真正难的不是让内容“动起来”，而是处理边界情况：异步加载的内容高度未定、屏幕阅读器播报逻辑、键盘焦点管理、移动端点击穿透、动画中断时的状态残留——这些往往比写个 toggle 函数花的时间多得多。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML展开与折叠功能实现方法》文章吧，也可关注golang学习网公众号了解相关技术文章。