纯CSS手风琴无需JavaScript，利用checkbox的:checked伪类与label控制状态；需满足：checkbox有唯一id、label正确关联、内容紧随其后并用+选择器；核心是max-height过渡与可访问性适配。

为什么不用 JavaScript 就能做手风琴？

因为 的状态变化会触发 :checked 伪类，而 的 for 属性或嵌套结构可以控制它——这给了我们纯 CSS 控制展开/收起的锚点。关键不是“模拟点击”，而是把用户交互映射到 CSS 状态上。

HTML 结构必须满足的三个条件

结构松散或标签错位会导致点击无响应、状态不同步：

• 必须是 type="checkbox"（radio 也可但不推荐多开），且要有唯一 id
• 要么用 for="对应input的id"，要么直接包裹 和标题内容（更稳妥）
• 要展开的内容（如
  ）必须紧跟在 后面，且使用 + 或 ~ 选择器定位（+ 更精准，只选紧邻兄弟）

  核心 CSS：用 :checked 控制高度与过渡

  不能直接对 height: auto 做 transition，所以得用 max-height 配合足够大的值（比如 500px），再设 overflow: hidden。常见错误是忘记重置 padding 或 margin 导致视觉跳变：

  input[type="checkbox"] {
    display: none;
  }
  
  .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    padding: 0 1rem;
  }
  
  input[type="checkbox"]:checked + .accordion-content {
    max-height: 500px;
    padding: 1rem;
  }

  注意：max-height 的值要略大于内容实际高度，太小会截断；太大则收起动画变慢。如果内容高度差异大，建议用 JS 动态设，但那就不是纯 CSS 了。

  

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

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

  下载

  可访问性与移动端适配要点

  纯 CSS 方案默认不发 click 事件，屏幕阅读器可能无法感知状态变化，也容易在 iOS Safari 上出现点击延迟或失效：

  • 给 加 role="button" 和 tabindex="0"，确保键盘可聚焦
  • 为 添加 aria-expanded 并用 JS 同步（严格来说这破了“纯 CSS”前提，但无障碍必须）
  • 移动端点击区域太小？用 min-height 或 padding 扩展 可点击区，别只靠文字
  • 避免在 .accordion-content 里放 position: absolute 元素——它们会逃出 overflow: hidden 的裁剪范围

  最易被忽略的是：多个手风琴共存时，每个 的 id 和 的 for 必须一一对应，漏一个就整个区块失联。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！