:hover无法直接改为点击展开，因CSS无状态存储能力，:active和:focus均不满足持久切换需求，必须用JS控制类名实现toggle；transition须写在默认状态而非.expanded中，max-height值需预估内容最大高度以确保动画流畅。
为什么:hover不能直接改成点击展开
因为 :hover 是瞬时悬停态，鼠标移出就恢复；而“点击展开”需要持久记录状态——CSS 本身没有变量或状态存储能力，:active 只维持几十毫秒，:focus 依赖可聚焦元素且易被 Tab 键干扰。纯 CSS 无法实现「点一下开、再点一下关」的 toggle 行为，必须靠 JavaScript 控制类名切换。
用 class + JS 实现点击展开的核心写法
核心是把原来写在 .box:hover 里的展开样式，挪到一个自定义类（比如 .expanded）里，再用 JS 给元素添加/移除这个类。
- HTML 中确保按钮和目标容器有明确关系，例如通过
data-target指向 ID - CSS 中定义
.expanded对应的视觉变化（如max-height、opacity、visibility） - JS 里监听点击，调用
el.classList.toggle('expanded')
示例关键片段：
.faq-item .content {
max-height: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: max-height 0.4s ease, opacity 0.3s ease;
}
.faq-item.expanded .content {
max-height: 500px;
opacity: 1;
visibility: visible;
}
transition 写在哪？为什么不能只写在 .expanded 里
transition 必须写在**默认状态**（即未展开时的规则块）中，否则从展开切回收起时动画不触发。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
.expanded { transition: max-height 0.4s; }→ 收起时无过渡 - 正确写法：
.content { transition: max-height 0.4s ease, opacity 0.3s ease; }→ 进出都有动画 - 别用
transition: all，它会意外过渡border-color或font-size，拖慢渲染
max-height 过渡比 height 更可靠，但值怎么设
height: auto 无法参与 transition，所以必须用 max-height 替代。它的值不是“越大越好”，而是“够大但不过载”：
- 设成
500px或1000px比100vh稳定，避免 Safari 地址栏显示/隐藏导致视口高度抖动 - 如果内容可能超过 500px（比如含大量 padding、多行文本、大字体），就设成
1200px，宁可略大，不可偏小 - 千万别设成
max-height: 0→max-height: 1px，1px 不够撑开内容，会导致文字被裁剪
真正难的不是写代码，而是预估内容最大高度——这一步漏掉，动画就会卡住或闪跳。
