响应式折叠面板CSS设计教程

常见错误现象：click 事件绑在父容器上，但子元素没设 tabindex="0"，导致键盘无法触发、屏幕阅读器不可访问，且部分安卓 WebView 忽略无焦点能力的元素上的 :focus-within。

• 优先用原生
  ：它自带 open 属性切换和语义化，无需额外 CSS 控制显隐逻辑
• 若需自定义样式，保留
  的可聚焦性，不要用 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 必须手动同步

原生