details和summary可原生实现响应式折叠面板，无需JS或框架；summary必须为details首个子元素，加open属性默认展开；CSS用max-height而非height做动画更可靠，需配合足够大的预设值及getBoundingClientRect()动态测量真实高度。

用 details 和 summary 最快实现响应式折叠面板

原生 HTML 就能做，不需要 JS 或框架。现代浏览器（Chrome 12+、Firefox 49+、Safari 6.1+、Edge 79+）都支持 details，它天生响应式——宽度缩小时内容自动收起，交互逻辑、焦点管理、语义化全部内置。

常见错误是手动写 div + JS 控制 display: none，结果屏幕阅读器无法识别可折叠结构，移动端点击区域小，还容易漏掉 aria-expanded 等无障碍属性。

实操建议：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• details 默认闭合，加 open 属性可默认展开：
  标题

  内容

• summary 内可放任意内联元素（图标、span、SVG），但不要嵌套 button —— 它本身已是可聚焦、可按键触发的交互元素
• 用 CSS 选中展开状态：details[open] > summary::after 可替换默认三角箭头，避免用 JS 切换 class

CSS 控制折叠动画时为什么 max-height 比 height 更可靠

details 不支持直接对内容区域设 CSS 过渡（因为内部元素没有固定高度），硬加 transition: height 0.3s 会失效或跳变。正确做法是用 max-height 配合足够大的初始值，并确保内容高度不超过该值。

典型陷阱：设 max-height: 0 → max-height: 500px，但实际内容超 500px 就会被截断；或者用 overflow: hidden 却忘了给父容器设 overflow: visible（details 默认是 visible）。

实操建议：

• 给 details > *（除 summary 外所有子元素）设 max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out;
• details[open] > * 设 max-height: 500px（值需大于可能的最大内容高度，如含图片/动态文本，建议 800px 起）
• 若内容含图片，确保图片加载完成后再计算高度 —— 但原生 details 不触发 resize 事件，此时应改用 JS 实现（见下节）

需要动态高度动画？用 JS 监听 toggle 事件 + getBoundingClientRect()

当折叠内容高度不可预估（比如富文本、异步加载的评论列表），max-height 动画会失真。这时必须用 JS 测量真实高度并设置内联 style.maxHeight。

关键点在于监听 toggle 事件（不是 click），它在用户点击后、DOM 更新前触发，能准确读取即将展开/收起的内容尺寸。

实操建议：

• 用 details.addEventListener('toggle', e => { if (e.target.open) { const h = e.target.querySelector('div').getBoundingClientRect().height; e.target.style.setProperty('--target-height', h + 'px'); } })
• CSS 中用 details[open] > div { max-height: var(--target-height); }，配合 transition: max-height 0.3s ease
• 避免在 toggle 里直接调用 offsetHeight —— 此时 DOM 尚未重排，返回值为 0；getBoundingClientRect() 强制触发重排，拿到真实值

移动端点击无响应？检查 summary 是否被 pointer-events: none 或其他层遮挡

常见现象：桌面端正常，iOS Safari 或安卓 Chrome 点击没反应。大概率是 summary 上层有透明元素（比如伪元素、空 div、CSS Grid 的重叠区域），或父级设置了 touch-action: none。

另一个隐蔽原因是 summary 内用了 display: flex 但未设 align-items: center，导致点击热区偏移（尤其文字居中时，视觉中心 ≠ 可点击区域中心）。

实操建议：

• 用浏览器开发者工具的「元素选择器」悬停检查，确认点击时高亮的是 summary 本身，而非其父或子节点
• 临时加 summary { outline: 2px solid red; } 查看实际可点击范围
• 避免给 summary 设 position: relative 后再用 z-index —— 它可能脱离文档流，影响触摸事件捕获

细节最麻烦的地方其实是内容高度变化后的动画重置：比如展开后用户调整窗口大小，或动态插入新 DOM，max-height 值不会自动更新。这时候得重新监听 resize 或 MutationObserver，但别忘了节流 —— 频繁触发测量会卡顿。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！