使用纯css实现手风琴折叠面板过渡效果，核心在于利用 :has() 伪类选择器监听父级状态，并结合 max-height 属性配合 transition 实现平滑展开与收起。当用户点击标题时，通过隐藏的 切换选中状态，:has(> input:checked) 能够精准定位到当前被激活的面板，从而改变其内部内容区域的 max-height，其他未选中的面板则恢复默认高度，形成互斥的手风琴效果。
如何构建HTML结构与隐藏控件
构建结构的关键是使用 实现互斥效果依赖于 虽然 标签包裹标题文本，并将 放置在 即可触发复选框的状态切换，而无需任何JavaScript事件监听。每个面板项包含一个复选框、一个用于显示的标题和一个内容容器，确保DOM结构清晰且符合无障碍访问标准。<div class="accordion">
<div class="accordion-item">
<input type="checkbox" id="item-1" name="accordion"><label for="item-1">第一部分</label>
<div class="content">
<p>这里是第一部分的详细内容...</p>
</div>
</div>
<div class="accordion-item">
<input type="checkbox" id="item-2" name="accordion"><label for="item-2">第二部分</label>
<div class="content">
<p>这里是第二部分的详细内容...</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/gongju/2905" title="CSS"><img
src="https://img.php.cn/upload/manual/000/969/633/6af2b1226ad9e733.png" alt="CSS" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/gongju/2905" title="CSS" class="overflowclass">CSS</a>
<p class="overflowclass">CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。</p>
</div>
<a rel="nofollow" href="/xiazai/gongju/2905" title="CSS" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</div>
</div>
</div>
如何实现互斥展开与平滑过渡
name 属性相同的复选框组以及 :has() 的选择能力。在CSS中，设置所有 .content 的初始 max-height: 0 并隐藏溢出。当某个 .accordion-item 内的复选框被选中时，:has(> input:checked) .content 将 max-height 设置为一个足够大的值（如 500px 或 100vh），同时添加 transition 属性。由于 :has() 是相对选择器，它只影响当前被激活的项，其他项因复选框未选中，保持 max-height: 0，从而实现手风琴式的互斥切换。.accordion {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.accordion-item {
border: 1px solid #ddd;
margin-bottom: -1px;
}
.accordion-item input[type="checkbox"] {
display: none;
}
.accordion-item label {
display: block;
padding: 15px;
background: #f9f9f9;
cursor: pointer;
font-weight: bold;
}
.accordion-item .content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
background: #fff;
}
.accordion-item .content p {
padding: 15px;
margin: 0;
}
/* 关键：当 item 内有 checked 的 input 时，展开 content */
.accordion-item:has(> input:checked) .content {
max-height: 500px; /* 根据内容调整 */
}
如何处理动态内容高度的兼容性问题
max-height 方案简单有效，但其缺点是需要预设一个足够大的固定值来容纳最长内容，若内容高度超过该值则会被截断。对于需要完美自适应高度的场景，纯CSS目前尚无完美的通用解决方案，通常需借助 grid-template-rows 的新特性或极小的JS辅助。但在现代浏览器支持 :has() 的前提下，可以通过将 max-height 设置为一个极大的值（如 1000px）并结合 overflow: hidden 来覆盖绝大多数常规文本场景。若内容高度变化剧烈，建议评估是否引入少量JS来计算实际高度，或在设计阶段限制面板内容的最大行数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
