利用 :checked 伪类实现纯样式折叠风琴菜单，核心在于将隐藏的 与 绑定，并通过 css 的通用兄弟选择器 ~ 或相邻兄弟选择器 + 来根据复选框的状态控制内容区域的显示与隐藏。具体做法是：html 结构中，每个手风琴项包含一个不可见的 checkbox、一个用于点击的 label（即标题）以及紧随其后的内容容器；css 中默认隐藏所有内容容器，当 checkbox 被选中时，通过选择器定位到同级的内容容器并设置 display: block 或 max-height 动画，从而实现展开效果。
如何构建 HTML 结构以支持单选互斥逻辑？
要实现类似原生手风琴的单选效果（即展开一项时自动收起另一项），需要在 HTML 结构上建立明确的层级关系，通常使用 div 包裹 input、label 和 content。关键在于所有 checkbox 必须属于同一个 name 组才能实现浏览器原生的单选互斥，或者在 CSS 中通过更复杂的兄弟选择器逻辑来实现“展开当前，隐藏其他”的效果。这里我们采用通用的兄弟选择器方案，因为它不依赖 name 属性的互斥性，而是通过视觉上的覆盖来实现，或者更简单地，每个手风琴项独立控制，但为了模拟标准手风琴，我们通常会让所有面板默认隐藏，仅显示被激活的那个。
<div class="accordion-item">
<input type="checkbox" id="item-1" name="accordion" class="accordion-toggle"><label for="item-1" class="accordion-header">第一部分</label>
<div class="accordion-content">
<p>这里是第一部分的详细内容。</p>
</div>
</div>
<div class="accordion-item">
<input type="checkbox" id="item-2" name="accordion" class="accordion-toggle"><label for="item-2" class="accordion-header">第二部分</label>
<div class="accordion-content">
<p>这里是第二部分的详细内容。</p>
</div>
</div>
上述代码展示了两个手风琴项的结构。每个项都包含一个 id 唯一的 input，其 for 属性与对应 label 的 for 属性匹配，确保点击标签能触发复选框状态改变。所有 input 共享相同的 name 属性 accordion，这在原生 HTML 行为中会强制它们成为单选按钮组，即选中一个会自动取消另一个的选择状态，这是实现互斥逻辑最简单且无需 JavaScript 的方法。如果不需要严格的单选互斥，可以移除 name 属性，允许同时展开多项。
CSS 选择器如何精准定位并切换内容状态？
CSS 的核心逻辑依赖于 :checked 伪类与兄弟选择器的组合。由于 input 和 content 通常是兄弟节点，我们可以使用通用兄弟选择器 ~ 来选中 input:checked 之后的所有 .accordion-content 元素。然而，为了实现“只展开当前项”，我们需要更精确的作用域控制。最佳实践是使用相邻兄弟选择器 + 或限定在同一父级下的通用选择器。考虑到结构，#item-1:checked ~ .accordion-content 这种写法只能选中紧跟在 input 后面的 content，如果中间隔了 label 则失效。因此，更稳健的写法是利用父级容器，或者假设结构为：input, label, content 依次排列。此时，#item-1:checked + label + .accordion-content 可以精准选中对应的内容。若希望简化选择器，可以将 input 放在最后，或使用 ~ 配合特定的类名隔离。
.accordion-toggle {
display: none;
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
background-color: #f9f9f9;
}
/* 当 checkbox 被选中时，找到其后紧跟的 .accordion-content */
/* 注意：这里假设结构为 input, label, content */
/* 如果结构是 input, content (label 用 for 关联)，则用 input:checked ~ .accordion-content */
/* 方案 A：结构为 input, label, content */
.accordion-toggle:checked + .accordion-header + .accordion-content {
max-height: 500px; /* 足够大的值以容纳内容 */
}
/* 方案 B：结构为 input, content (label 独立) */
/* .accordion-toggle:checked ~ .accordion-content { max-height: 500px; } */
.accordion-header {
padding: 15px;
cursor: pointer;
background-color: #ddd;
margin-bottom: 5px;
}
.accordion-header:hover {
background-color: #ccc;
}
在上述 CSS 中，.accordion-content 默认 max-height: 0 且 overflow: hidden，从而隐藏内容。当 .accordion-toggle 被选中时，选择器 .accordion-toggle:checked + .accordion-header + .accordion-content 生效，将 max-height 设置为一个较大的值（如 500px 或 100vh），并触发动画过渡。由于 HTML 中所有 input 共享 name="accordion"，浏览器会自动处理单选逻辑：当用户点击第二个项目的 label 时，第二个 input 变为 checked，第一个 input 变为 unchecked。此时，第一个项目的选择器不再匹配，其内容恢复 max-height: 0，而第二个项目的选择器匹配，内容展开。这种方法完全依赖 CSS 和 HTML 原生行为，无需任何 JavaScript 介入。
如何实现平滑的展开与收起动画效果？
纯 CSS 实现平滑动画的关键在于对 height 或 max-height 属性应用 transition。直接对 height 从 0 过渡到 auto 是不被支持的，因为 auto 不是数值。因此，业界标准的替代方案是使用 max-height。我们将 .accordion-content 的初始状态设为 max-height: 0，并在 :checked 状态下将其设为一个足够大的固定值，例如 500px 或 1000px。这个值必须大于内容的实际高度，否则内容会被截断。虽然这会导致收起时动画时间略微不一致（展开快，收起慢，取决于内容实际高度与 max-height 的比例差异），但在大多数场景下是可接受的。另一种更高级的技术是使用 grid-template-rows 从 0fr 过渡到 1fr，但这需要较新的浏览器支持。对于广泛兼容性，max-height 方案是最稳妥的。
此外，为了提升用户体验，可以在 label 上添加旋转图标。例如，使用 ::after 伪元素插入一个箭头，并通过 transform: rotate(180deg) 在 :checked 状态下旋转它。这需要额外的 CSS 规则：.accordion-header::after { content: '+'; transition: transform 0.3s; } .accordion-toggle:checked + .accordion-header::after { transform: rotate(45deg); }。这样，用户在视觉上能更清晰地感知到手风琴的状态变化。整个交互过程完全由 CSS 驱动，性能优异，且易于维护。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
