checkbox hack 是利用 checkbox 的 :checked 伪类配合 CSS 选择器实现显隐控制的纯 CSS 技术；它依赖 HTML 结构（label 关联 input）、隐藏原生控件、合理使用 visibility/opacity/max-height 动画，并注意移动端点击区域与兼容性限制。
checkbox hack 是什么，为什么它能在不写 JS 的情况下控制显隐
它利用 的 :checked 伪类 + 相邻/后代选择器，触发样式切换。本质是“把表单控件当开关用”，浏览器原生支持，零 JS 即可响应点击。
关键在于：HTML 结构必须让 label 能控制 input（for 或嵌套），且后续内容能被该 input 的状态选中到。
- 必须用
+，否则点击 label 不会触发状态变化 -
:checked ~ .content只能选中兄弟元素，:checked + .content只能选中紧邻下一个兄弟；若内容在 input 内部，得用:checked .content（后代） - 移动端 Safari 对
:checked的重绘有时延迟，建议加transform: translateZ(0)强制硬件加速
移动端点击区域小、误触多，怎么让 checkbox hack 更可靠
原生 默认尺寸极小，手指点不准，还常被 Safari 自动缩放干扰。
- 必须隐藏原生 checkbox：用
position: absolute; opacity: 0; pointer-events: none;，别用display: none（会断开 label 关联） - label 必须设足够大的
padding或min-height（至少 44px），并加cursor: pointer - 避免用
font-size: 0清空 label 文本间隙——它可能让 Safari 忽略点击穿透，改用line-height: 0或display: block - 在 iOS 上测试时，确保 viewport meta 有
user-scalable=no否则双击缩放会破坏布局
显示/隐藏动画卡顿或闪一下？CSS 过渡和渲染层要注意什么
直接对 display 做 transition 无效；用 opacity + visibility 或 max-height 是常见方案，但各有坑。
-
opacity: 0; visibility: hidden;配合transition: opacity 0.2s, visibility 0.2s—— visibility 不能过渡，所以实际是visibility: hidden在 opacity 动画结束后立即生效，视觉上连贯 - 别用
height: 0; overflow: hidden;+transition: height：height 是不可过渡的离散值，动画会跳变；改用max-height（设一个足够大的固定值，如max-height: 500px） - 动画元素加
will-change: transform;或transform: translateZ(0)，防止 iOS 滚动时闪烁 - 如果内容含 iframe 或 video，隐藏时务必加
pointer-events: none，否则即使透明仍可能拦截点击
兼容性边界在哪？哪些情况必须换 JS
checkbox hack 在 iOS 12+ 和 Android Chrome 70+ 基本稳定，但真遇到复杂交互就露馅。
- 无法响应外部状态变更：比如路由跳转后想默认展开某区块，纯 CSS 拿不到 URL 参数，
:checked状态不会自动同步 - 多个 toggle 互相排斥（radio 行为）可以模拟，但“点击 A 关闭 B，再点 B 关闭 A”需要 JS 记录上一个激活项
- 键盘无障碍访问弱：screen reader 不会把
label当作可聚焦按钮，且无法用空格/回车触发；加role="button"和tabindex="0"后仍需 JS 处理 keydown - Safari 私密模式下，
localStorage不可用，但 checkbox hack 本身不依赖存储——这点反而是优势
真正难搞的是嵌套折叠、滚动锚点联动、或者需要动画结束回调的场景。这时候别硬扛，加三行 JS 控制 class 更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
