纯CSS折叠面板需确保可聚焦性与语义化：优先用原生，自定义时保留summary可聚焦性；max-height动画须用固定值；收起时同步设置max-height:0、overflow:hidden、opacity:0；无障碍须手动同步aria-expanded与aria-controls。
点击区域不响应？检查 :focus-within 和事件委托是否误用
纯 CSS 实现折叠面板时，很多人直接给 <summary></summary> 或自定义按钮加 display: none，结果点不动——本质是没触发伪类状态切换。CSS 折叠依赖的是元素自身状态（如 details[open]）或可聚焦元素的 :focus/:focus-within，而不是 JS 式的 click 监听。
常见错误现象：click 事件绑在父容器上，但子元素没设 tabindex="0"，导致键盘无法触发、屏幕阅读器不可访问，且部分安卓 WebView 忽略无焦点能力的元素上的 :focus-within。
- 优先用原生
<details><summary></summary></details>：它自带open属性切换和语义化，无需额外 CSS 控制显隐逻辑 - 若需自定义样式，保留
<summary></summary>的可聚焦性，不要用div替换；禁用默认箭头可用summary::marker { display: none; } - 避免在父容器上写
.panel:focus-within .content { max-height: 500px; }，除非内部有明确可聚焦子元素（如input、带tabindex的span）
max-height 动画卡顿？别硬塞 0 → 1000px
CSS 过渡 max-height 看似简单，实则极易因数值失配导致动画跳变或不触发。浏览器无法对 max-height: 0 → max-height: auto 做平滑插值，所以必须用固定值替代 auto。
使用场景：内容高度不确定，又想用纯 CSS 实现展开收起动画。
立即学习“前端免费学习笔记（深入）”；
- 安全做法是预估最大高度（如
max-height: 30em），并确保内容实际高度永远小于此值；过大会导致收起时留白，过小会截断 - 更稳方案是用
height+overflow: hidden，但需 JS 获取真实scrollHeight后写入内联样式——这就脱离了“纯 CSS”前提 - 注意
transition: max-height 0.3s ease在 Safari 旧版本中可能失效，可加transition-property: max-height, opacity提升兼容性
移动端点击穿透？pointer-events 不是万能解
折叠面板收起后，底层内容被意外点击，常被归因为“点击穿透”，但真实原因多是 opacity: 0 或 visibility: hidden 未同步关闭交互能力。
性能影响：滥用 pointer-events: none 会导致整个子树失去所有指针事件，包括滚动、长按复制、甚至 input 聚焦。
- 正确做法是收起时同时设
max-height: 0+overflow: hidden+opacity: 0，再用transition协同变化 - 若必须用
visibility: hidden，请搭配pointer-events: none，但要确认该区域确实不需要任何交互（比如没有button或a） - iOS Safari 中，
transform: scale(0)也会引发类似穿透，慎用于折叠容器
无障碍支持被忽略？aria-expanded 和 aria-controls 必须手动同步
原生 <details></details> 自带完整 ARIA 支持，但一旦用 div + CSS 模拟，就彻底丢失语义。屏幕阅读器无法感知“这个按钮控制哪块内容”“当前是展开还是收起”。
容易踩的坑：只加 aria-expanded="true" 却没绑定 id 关系，或忘记在 JS 切换状态时同步更新属性值。
- 结构必须成对：
<button aria-expanded="false" aria-controls="panel-1">标题</button><div id="panel-1">内容</div></li> <li>每次展开/收起，都要用 JS 更新 <code>button.setAttribute('aria-expanded', 'true')和div.setAttribute('hidden', true)（后者辅助非 ARIA 场景） - 不要依赖 CSS 类名判断状态，比如
.is-open对辅助技术完全不可见
