使用纯css实现手风琴折叠面板过渡效果，核心在于利用 :has() 伪类选择器监听父级状态，并结合 max-height 属性配合 transition 实现平滑展开与收起。当用户点击标题时，通过隐藏的 <input type="checkbox"> 切换选中状态，:has(> input:checked) 能够精准定位到当前被激活的面板，从而改变其内部内容区域的 max-height，其他未选中的面板则恢复默认高度，形成互斥的手风琴效果。
如何构建HTML结构与隐藏控件
构建结构的关键是使用 <label></label> 标签包裹标题文本，并将 <input type="checkbox"> 放置在 <div class="accordion-item"> 内部的最前端。这样点击 <code><label></label> 即可触发复选框的状态切换，而无需任何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">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/gongju/2905" title="CSS"><img
src="https://img.php.cn/upload/manual/000/969/633/6af2b1226ad9e733.png" alt="CSS" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/gongju/2905" title="CSS">CSS</a>
<p>CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。</p>
</div>
<a href="/xiazai/gongju/2905" title="CSS" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</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来计算实际高度，或在设计阶段限制面板内容的最大行数。
