答案：利用css的:checked伪类结合复选框与label实现折叠面板，通过控制max-height和transition实现平滑展开收起。使用details标签可更语义化地实现类似效果，配合唯一ID、合理设置max-height及过渡动画优化体验，适用于无需javaScript的交互场景。
实现一个用CSS制作的折叠面板展开效果，关键在于利用:checked伪类结合<input type="checkbox">或<details>标签控制内容显示。下面是一个简洁、实用且无需javascript的纯CSS方案。
使用复选框和label实现折叠面板
通过隐藏的复选框与label联动，配合CSS过渡动画，实现平滑展开收起效果。
html结构如下：
<div class=”accordion”>
<input type=”checkbox” id=”panel1″ class=”accordion-toggle”>
<label for=”panel1″ class=”accordion-title”>点击展开/收起</label>
<div class=”accordion-content”>
<p>这里是折叠面板的内容，可以是任意html元素。</p>
</div>
</div>
css样式设置：
立即学习“前端免费学习笔记（深入）”；
.accordion {
border: 1px solid #ddd;
margin-bottom: 10px;
border-radius: 4px;
overflow: hidden;
}
.accordion-title {
display: block;
padding: 12px;
background: #f5f5f5;
cursor: pointer;
font-weight: bold;
border-bottom: 1px solid #ddd;
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
padding: 0 12px;
}
.accordion-toggle:checked + .accordion-title {
background: #e9e9e9;
}
.accordion-toggle:checked ~ .accordion-content {
max-height: 200px;
padding: 12px;
}
说明：
- 初始状态
max-height: 0隐藏内容 - 勾选复选框后，
:checked触发max-height变为足够大的值，实现展开动画 -
transition让高度变化更自然 - 注意
~选择器用于选中后面的兄弟元素
使用details标签（更语义化）
如果不需要兼容老版本浏览器，可直接使用<details>和<summary>，更简洁。
<details class=”custom-details”>
<summary>点击展开</summary>
<div class=”details-content”>
<p>这里是要展示的内容。</p>
</div>
</details>
CSS添加过渡效果：
.details-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
details[open] .details-content {
max-height: 100px;
padding: 12px 0;
}
优化建议
为了让效果更自然，可以考虑以下几点：
- 将
max-height设为实际内容可能的最大高度（如500px），避免动画卡顿 - 使用
opacity或transform辅助动画，提升视觉体验 - 为多面板添加唯一ID，避免冲突
- 移动端注意点击区域大小，提升可用性
基本上就这些，不复杂但容易忽略细节。