max-height过渡失效因none不可动画，应改用scaleY(0)/opacity-0配合overflow-hidden；多手风琴需独立状态（如openIndex）；移动端需扩大点击热区并同步aria-expanded/aria-hidden。
为什么直接用 max-height 过渡会失效？
因为 max-height 从 0 到 none 无法触发 CSS 过渡——none 不是可动画的长度值，浏览器直接跳变。常见错误是写成 transition: max-height 0.3s 并期望它平滑展开，结果只收起有动画、展开瞬间弹出。
实操建议：
- 用具体像素值替代
none，比如max-height: 500px（需预估内容最大高度） - 或改用
height+overflow-hidden，但同样要避免height: auto - 更可靠的方式是配合
opacity和transform: scaleY()做视觉过渡，绕过高度计算
用 scaleY + opacity 实现无高度依赖的过渡
这是 Tailwind 中最稳妥的手风琴方案：不依赖内容高度，纯靠变形和透明度，兼容性好且无需 JS 测量 DOM。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 折叠时设
scaleY(0)和opacity-0，同时加origin-top确保从顶部收缩 - 展开时移除这些类，并加
transition-transform和transition-opacity - 必须配
overflow-hidden防止内容溢出动画区域
示例结构（简化）：
<div class="overflow-hidden transition-all duration-300 ease-in-out [&.open]:scale-y-100 [&.open]:opacity-100 [&.closed]:scale-y-0 [&.closed]:opacity-0 origin-top"> <div class="p-4">…内容…</div> </div>
如何用 useState 控制多个手风琴项不互相干扰？
每个折叠项需要独立的状态，不能共用一个布尔值。否则点击一个，其他全收/全开。
实操建议：
- 用数组索引或唯一 ID 作为状态 key，例如
const [openIndex, setOpenIndex] = useState(null) - 点击时设为当前项索引：
setOpenIndex(i)，判断是否展开用openIndex === i - 如果用 React + Tailwind，推荐配合
group和group-data-[state=open]（v3.4+ 支持），但需注意 SSR 兼容性
移动端点击区域小导致误操作怎么办？
手风琴标题常只是文字或小图标，手指点不准容易漏触。Tailwind 默认没给足够点击热区。
解决方式：
- 给触发按钮加
py-3 px-4或更大内边距，确保最小触控尺寸 ≥ 44px - 用
focus-visible+ring类保留键盘导航可用性，例如focus-visible:ring-2 focus-visible:ring-blue-500 - 避免在按钮内嵌套
div或span再绑事件——直接让button包住整个标题区域
真正麻烦的是过渡结束后的 DOM 可访问性：折叠后内容仍存在于 DOM 中，需加 aria-expanded 和 aria-hidden 手动同步，否则屏幕阅读器会读到隐藏内容。
