CSS移动端实现纯CSS手风琴折叠_利用checked伪类切换显示内容-css教程-PHP中文网

手风琴用 checkbox 而非 radio 是因需支持“全部收起”，checkbox 天然支持点击切换与 :checked 伪类闭环控制；radio 无法取消选中，除非 JS 干预。

css移动端实现纯css手风琴折叠_利用checked伪类切换显示内容

手风琴折叠用 `input[type="checkbox"]` 而不用 `radio` 的原因

单个手风琴默认只展开一项？那确实该用 radio，但实际项目里几乎没人这么干——因为一旦用 radio，就无法「全部收起」。用户点开一个，再点一次就得保持展开态，而 radio 没有“取消选中”机制（除非 JS 干预）。checkbox 天然支持点击切换，配合 :checked 伪类就能干净实现「点开/收起」闭环。

常见错误现象：label 点击没反应、切换后内容不显示——大概率是 input 和 label 没绑定（缺 for 或 id），或 input 被设了 display: none 但没加 position: absolute; left: -9999px 类似的隐藏方式（部分浏览器对 display: none 的 :checked 状态识别不稳定）。

必须确保每个 input 有唯一 id，对应 label[for]
别用 visibility: hidden 隐藏 input，它仍占布局流，可能干扰相邻元素
移动端 Safari 对 label 点击热区较窄，建议给 label 加 padding 或 min-height

`~` 选择器在手风琴结构里为什么比 `+` 更可靠

手风琴内容通常紧挨着 input，但中间常插 label（比如标题放 label，内容放 div）。这时如果写 input:checked + .content，会失效——因为 .content 不是 input 的**直接兄弟**，中间隔了 label。

~ 是后续兄弟选择器，只要在同一个父容器内、位于 input 后面的兄弟元素都匹配，容错性高得多。

结构必须保证 input、label、内容容器都在同一层父元素下
别把内容块包进 label 里（语义错误，且 label 内点击会反复触发 checkbox 切换）
Android WebView 旧版本对 ~ 支持差，如需兼容 Android 4.x，得降级用 JS 或额外 wrapper

移动端动画卡顿？别直接用 `height: auto` 做过渡

CSS 过渡不能直接从 height: 0 到 height: auto，浏览器不知道 auto 对应多少像素，动画会跳变或失效。常见补救法是用 max-height 代替，但值设太小会截断内容，设太大又导致动画慢（比如设 max-height: 1000px，展开时要跑完 1000px 才停）。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

更稳妥的做法：用 transform: scaleY() + overflow: hidden，性能更好，也不依赖具体高度。

transform 触发 GPU 加速，比 height 过渡更顺滑
必须配 overflow: hidden，否则缩放时内容会溢出
注意 scaleY(0) 会让子元素文字模糊（尤其是 iOS Safari），可加 backface-visibility: hidden 缓解
别对 transform 做 transition: all，只写 transition: transform 0.3s ease

无障碍访问被忽略的三个硬伤

纯 CSS 手风琴最大的坑不是样式，是残障用户根本不知道这是可交互区域，或者屏幕阅读器读不出当前状态。光靠视觉隐藏 input 不够，还得补语义。

给 label 加 role="button" 和 aria-expanded 属性，并用 JS 同步更新（CSS 无法改属性值）
input 本身不能 display: none，得用 position: absolute; clip: rect(0 0 0 0) 这类可访问隐藏方式
内容区域必须加 role="region" 和 aria-labelledby 指向对应 label 的 id