纯css“展开/收起”必须用:checked伪类触发，因:hover和:focus无法稳定维持状态；需将checkbox置于label前，用~或+选择器控制同级.content的max-height过渡动画，禁用display切换。
用 :checked + <input type="checkbox"> 触发显示切换
纯 CSS 实现“展开/收起”必须依赖用户交互能改变状态的伪类，:checked 是唯一稳定可用的选择。不能用 :hover（移开就收），也不能靠 :focus（焦点易丢失、键盘支持差）。
核心思路是把一个隐藏的 <input type="checkbox"> 和目标内容区域关联起来，用 label 控制它，再用相邻或后代选择器控制内容显隐：
-
<input>必须放在label之前或之后（推荐之前），且和目标内容在 DOM 中满足 CSS 选择器可达关系（如兄弟、后代） - 目标内容容器需设
max-height或height配合overflow: hidden，否则 CSS 过渡动画无效 - 初始状态用
input:not(:checked) ~ .content控制隐藏，input:checked ~ .content控制展开
<input type="checkbox" id="toggle"><label for="toggle">点击展开</label>
<div class="content">...长内容...</div>
<p><style>
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}</style></p><h1>toggle:not(:checked) ~ .content {</h1><p>max-height: 0;
}</p><h1>toggle:checked ~ .content {</h1><p>max-height: 500px; /<em> 设足够大的值，或用具体行高估算 </em>/
}
</p>
为什么不用 display: none 做切换动画
display 属性不可动画，设 display: none → block 会导致过渡失效，内容瞬间闪出。必须用可过渡的属性，最常用的是 max-height。
-
max-height要设一个「大于内容实际高度」的固定值，比如500px；设太小会截断，设太大动画时间变长 - 如果内容高度差异极大（比如从 2 行到 20 行），可按行高估算：
max-height: calc(1.5em * 20) - 不建议用
opacity单独控制——它不占布局空间，收起后下方元素会上移，体验割裂
如何让“展开”按钮文字随状态动态变化
CSS 本身不能修改文本内容，但可以用伪元素 + :checked 切换 content 值来模拟：
<label for="toggle" class="toggle-label"></label>
<p>.toggle-label::before {
content: "展开";
}</p><h1>toggle:checked + .toggle-label::before {</h1><p>content: "收起";
}</p>
注意：label 必须紧跟在 input 后面（用 + 选择器），否则伪元素不会响应状态变化。若中间插入了其他元素，得改用 ~ 并确保结构可控。
移动端点击区域小、无障碍支持差的问题怎么解
默认 label 只包裹文字，“点击展开”四个字太小，尤其在手机上容易点不准；而且屏幕阅读器无法感知状态变化。
- 给
label加padding或min-height扩大热区，避免只靠文字触发 - 加
aria-expanded属性并用 JS 同步更新（纯 CSS 无法写属性），否则读屏软件不知道当前是展开还是收起 - 如果项目对无障碍有硬性要求，纯 CSS 方案本质有缺陷——此时应退回到带 JS 的
aria-controls+aria-hidden组合
真正零 JS 的纯 CSS 展开方案，适合内部工具、原型页或对辅助技术无强制要求的场景。一旦涉及生产环境的合规性，就得接受 JS 的介入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
