答案：利用CSS的:checked伪类结合复选框与label实现折叠面板，通过控制max-height和transition实现平滑展开收起。使用details标签可更语义化地实现类似效果，配合唯一ID、合理设置max-height及过渡动画优化体验，适用于无需JavaScript的交互场景。
实现一个用CSS制作的折叠面板展开效果，关键在于利用:checked伪类结合或
使用复选框和label实现折叠面板
通过隐藏的复选框与label联动，配合CSS过渡动画，实现平滑展开收起效果。
HTML结构如下：
CSS样式设置：
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标签（更语义化）
如果不需要兼容老版本浏览器，可直接使用
点击展开
这里是要展示的内容。
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，避免冲突
- 移动端注意点击区域大小，提升可用性
