直接用max-height切换会卡顿或失效，因固定值（如500px）难以匹配动态内容高度，导致截断或留白；且未设overflow:hidden、padding/border干扰视觉收起，或选择器匹配失败致:checked不生效。
为什么直接用 max-height 切换会卡顿或失效
常见现象是：点击后内容“啪”一下弹出来，没有过渡；或者收起时高度突变、文字被裁切一半。根本原因是 max-height 动画依赖于「可预测的终值」——但 max-height: 0 → max-height: 500px 这种写死值，在内容高度动态变化（比如响应式文本、多行问答）时极易失准。
更隐蔽的问题是：设 max-height: 0 时若子元素有 padding/margin/border，视觉上仍可能露头；而设 max-height: 1px 又不够安全，某些字体渲染下仍会撑开。
- 别用
height: 0+height: auto——auto无法参与 transition - 避免硬写
max-height: 600px—— 内容增减后动画会提前截断或留白 - 记得加
overflow-hidden，否则动画过程中内容会溢出容器
max-height 配合 transition 的安全写法
核心思路：用足够大的固定值兜底，配合 transition 控制变化节奏。Tailwind 中推荐组合：
-
max-h-0→max-h-[500px]（注意中括号语法，避免预设类限制） -
overflow-hidden必须始终存在，不能只在折叠态加 -
transition-all duration-300 ease-in-out比单独transition-max-height更稳——因为实际还涉及 padding、opacity 等隐式变化
示例结构（纯 CSS 方案，无 JS）：
<input type="checkbox" id="faq-1" class="hidden"><label for="faq-1" class="cursor-pointer">Q: 问题标题</label>
<div class="max-h-0 overflow-hidden transition-all duration-300 ease-in-out [&_p]:my-2">
<p class="text-gray-600">A: 这是答案内容...</p>
</div>
<style>
#faq-1:checked ~ div { @apply max-h-[500px]; }
</style>
移动端点击无反应？检查 :checked 触发链是否断裂
纯 CSS 折叠面板依赖 <input type="checkbox"> + label[for] 或相邻兄弟选择器（~）。容易出问题的点：
- label 和 input 不在同一 DOM 层级，或中间插入了其他元素，导致
for失效 - 用了
+（紧邻兄弟）但实际中间有注释、空格文本节点，浏览器会视作真实节点阻断选择器 - 在 Vue/React 中直接用
v-model或useState控制 class，却忘了移除原生 checkbox 的交互逻辑，造成状态错乱
调试建议：打开 DevTools，手动勾选 checkbox，看对应 div 是否正确应用 max-h-[500px]；若不生效，说明选择器没匹配上。
想支持任意高度？得放弃纯 CSS，改用 JS 驱动 scrollHeight
当 FAQ 条目高度差异大、或内容含图片/嵌套组件时，max-h-[500px] 就会露馅。这时必须读取真实 scrollHeight 并内联设置：
- 用
useRef（React）或ref（Vue）拿到内容容器 DOM - 展开前获取
el.scrollHeight，设为style.maxHeight - 收起时设回
0，并在 transition 结束后清除 inline style，避免干扰下次计算
这个环节最容易忽略的是：动画结束回调时机。CSS transition 的 transitionend 事件可能触发多次（每个性质一个），要过滤出 max-height 对应的那次。
真正难的不是写动画，而是让每次展开都刚好包住内容，不多不少——这需要在 DOM 渲染完成后再读高度，而不能在 state 更新瞬间就去取。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
