:checked 只能通过 + 或 ~ 选择器控制后续兄弟元素，因此面板必须与 input 平级且位于其后；实现单开单闭需改用 name 相同的 radio；max-height 动画须设固定值而非 auto，结构正确性优先于样式技巧。

:checked 本身不能直接控制兄弟元素以外的任意元素展开/收起——它只对紧邻的 <label></label> 或后续兄弟元素生效，想靠它驱动远距离面板，必须用 HTML 结构配合。

为什么 :checked 只能控制兄弟或后续兄弟元素

CSS 选择器没有“父选择器”或“前一个兄弟”能力，:checked 的作用范围严格受限于选择器语法：只能通过 + （相邻兄弟）或 ~ （通用兄弟）选中其后的元素。这意味着 input 必须放在面板之前，且面板得是它的兄弟节点，不能嵌套在别的容器里。

• 错误结构：<div><input type="checkbox"></div> <div class="panel"></div> → input 和 panel 不是兄弟，:checked ~ .panel 失效
• 正确结构：<input id="a" type="checkbox"><label for="a">标题</label><div class="panel">内容</div>
• 所有面板需平级排列，不能包裹在同一个 <div class="accordion"> 内再统一控制 —— 那会切断兄弟关系 <h3>如何用单个 <code>checkbox 实现单开单闭（手风琴效果）

  纯 CSS 无法“取消其他已选中的 checkbox”，但可以用 radio 替代 checkbox，利用 name 属性强制互斥。这是最轻量、无 JS 的手风琴解法。

  

  CSS婚礼策划服务机构宣传网站模板

  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

  下载
  • 把所有 <input type="checkbox"> 换成 <input type="radio" name="accordion">
  • 每个 radio 的 id 要唯一，label[for] 必须匹配对应 id
  • .panel 使用 input:checked ~ .panel 显示，未选中时用 max-height: 0 + overflow: hidden 隐藏
  • 注意：默认没选中时所有面板都收起，若需默认展开第一个，给第一个 input 加 checked 属性

  max-height 过渡动画为何不能设为 auto

  CSS transition 不支持 height: auto 或 max-height: auto 的动画，浏览器无法计算中间帧。必须用固定值或足够大的 max-height 做过渡占位。

  • 安全做法：估算面板最大可能高度（如 max-height: 500px），设 transition: max-height 0.3s ease
  • 不要用 height，因为 height: 0 会破坏内部流式布局（如 flex 子项可能错位）
  • 若内容高度差异极大，max-height: 500px 在短内容上会有明显延迟收起感；可改用 clip-path 或 transform: scaleY() 替代，但兼容性略降（clip-path IE 不支持）

  移动端点击区域小、折叠体验卡顿的修复点

  原生 input[type="radio"] 默认样式在手机上点击热区极小，且部分安卓浏览器对 max-height 过渡渲染不流畅。

  • 隐藏原生 input：position: absolute; opacity: 0; pointer-events: none;
  • 扩大 label 点击区：给 label 设 display: block; padding: 12px 16px;，并加 cursor: pointer
  • 提升动画性能：给 .panel 加 will-change: max-height（仅当有卡顿才加，别滥用）
  • 避免在 .panel 里放大量 DOM 或重绘元素（如频繁变化的 SVG、canvas），否则 max-height 动画会掉帧

  真正难的不是写出能动的代码，而是让每一块 input、label、panel 在 DOM 树里刚好落在正确的位置关系上——差一个层级，整个手风琴就失效。结构比样式更关键。