css如何实现折叠面板效果_使用checkbox + label + sibling选择器实现

技术教程
2025-12-05 11:49:56

利用checkbox的选中状态控制内容显示，通过label触发checked变化，再用~选择器控制max-height实现展开收起动画。结构包含隐藏checkbox、可点击label及内容区，CSS中:checked配合max-height与transition完成流畅动画，支持多面板、键盘操作及默认展开，轻量且兼容性好，适用于静态页面或高性能需求场景。

使用 CSS 实现折叠面板效果，可以通过 checkbox、label 和 兄弟元素选择器（~） 来完成，无需 J*aScript。这种方式轻量、语义清晰，适合静态页面或对性能要求较高的场景。

基本原理说明

利用 checkbox 的选中状态控制内容区域的显示与隐藏。通过 label 标签绑定到 checkbox，点击 label 时会触发 checkbox 的 checked 状态变化。再使用 CSS 中的兄弟选择器 ~ 选取后续的内容块，配合 max-height 控制展开和收起动画。

HTML 结构

结构需要包含一个隐藏的 checkbox、一个可点击的 label，以及要展开/收起的内容区域。

<div class="accordion">
  <input type="checkbox" id="panel-1" class="accordion-toggle">
  <label for="panel-1" class="accordion-title">点击展开面板</label>
  <div class="accordion-content">
    <p>这里是折叠面板中的内容，可以是任意 HTML 元素。</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2006">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175679966594209.png" alt="AI大学堂">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2006">AI大学堂</a>
                            <p>科大讯飞打造的AI学习平台</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="AI大学堂">
                                <span>179</span>
                            </div>
                        </div>
                        <a href="/ai/2006" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="AI大学堂">
                        </a>
                    </div>
                
  </div>
</div>

CSS 样式实现

关键在于利用 :checked 状态和兄弟选择器 ~ 控制内容区的 max-height。

.accordion {
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}
<p>.accordion-toggle {
display: none; /<em> 隐藏 checkbox </em>/
}</p><p>.accordion-title {
padding: 12px;
background-color: #f5f5f5;
cursor: pointer;
font-weight: bold;
user-select: none;
}</p><p>.accordion-title:hover {
background-color: #eee;
}</p><p>.accordion-content {
max-height: 0;
overflow: hidden;
background-color: #fff;
transition: max-height 0.3s ease-out;
padding: 0 12px;
}</p><p>/<em> 当 checkbox 被选中时，展开内容 </em>/
.accordion-toggle:checked ~ .accordion-content {
max-height: 200px; /<em> 根据实际内容调整，或设为足够大 </em>/
padding: 12px;
}</p>