折叠面板是网页开发中常用的交互组件，通过点击标题区域可以切换内容区域的显示与隐藏，不需要JavaScript参与就能实现这一效果，核心是利用CSS选择器和过渡属性完成交互逻辑。
实现折叠面板的核心思路
纯CSS制作折叠面板的核心原理是借助<input type="checkbox">的选中状态，结合<label>标签的关联特性，通过CSS选择器匹配选中状态来切换内容区域的显示，同时使用<transition>属性添加平滑的过渡动画。
基础结构搭建
首先需要搭建折叠面板的基础HTML结构，包含控制选中的隐藏输入框、用于触发的标签以及内容容器，示例结构如下：
<div class="collapse-panel">
<input type="checkbox" id="collapse-1" class="collapse-toggle">
<label for="collapse-1" class="collapse-title">点击展开/收起内容</label>
<div class="collapse-content">
<p>这里是折叠面板的内容区域，默认处于隐藏状态，点击标题后会平滑展开显示。</p>
<p>可以在这个区域放置任意HTML内容，比如文字、图片、列表等。</p>
</div>
</div>
核心CSS样式编写
接下来编写对应的CSS样式，核心步骤包括隐藏输入框、设置标题样式、默认隐藏内容区域、通过选择器匹配选中状态显示内容，同时添加过渡动画：
/* 隐藏输入框 */
.collapse-toggle {
display: none;
}
/* 标题样式 */
.collapse-title {
display: block;
padding: 12px 16px;
background-color: #f5f5f5;
border: 1px solid #e0e0e0;
cursor: pointer;
font-size: 16px;
user-select: none;
}
/* 标题 hover 效果 */
.collapse-title:hover {
background-color: #e8e8e8;
}
/* 内容区域默认样式 */
.collapse-content {
max-height: 0;
overflow: hidden;
padding: 0 16px;
border: 1px solid #e0e0e0;
border-top: none;
transition: max-height 0.3s ease, padding 0.3s ease;
}
/* 输入框选中时展开内容 */
.collapse-toggle:checked + .collapse-title + .collapse-content {
max-height: 500px; /* 设置一个足够大的值容纳内容 */
padding: 16px;
}
多个折叠面板的实现
如果需要同时放置多个独立的折叠面板，只需要复制上面的结构，修改输入框的id和对应label的for属性即可，每个面板的状态互不干扰：
<div class="collapse-panel">
<input type="checkbox" id="collapse-2" class="collapse-toggle">
<label for="collapse-2" class="collapse-title">第一个折叠面板</label>
<div class="collapse-content">
<p>第一个面板的内容。</p>
</div>
</div>
<div class="collapse-panel">
<input type="checkbox" id="collapse-3" class="collapse-toggle">
<label for="collapse-3" class="collapse-title">第二个折叠面板</label>
<div class="collapse-content">
<p>第二个面板的内容。</p>
</div>
</div>
样式优化建议
为了让折叠面板的体验更好，可以做一些额外的样式优化：
- 在标题区域添加展开收起的箭头图标，通过CSS伪元素旋转实现状态切换
- 调整
max-height的值，避免内容过多时出现滚动条或者动画卡顿 - 给面板添加圆角、阴影等样式，提升视觉美观度
如果需要实现手风琴效果，也就是同时只能展开一个面板，只需要把<input>的类型改为radio，并且设置相同的name属性即可，radio的互斥选中特性会自动保证只有一个面板处于展开状态。
CSS折叠面板HTMLtransition修改时间：2026-06-15 15:00:33