当前位置：首页 > 文章列表 > 文章 > 前端 > CSS实现折叠面板展开效果

CSS实现折叠面板展开效果

2025-10-30 21:51:31 0浏览收藏

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《CSS实现折叠面板展开效果》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

答案：利用CSS的:checked伪类结合复选框与label实现折叠面板，通过控制max-height和transition实现平滑展开收起。使用details标签可更语义化地实现类似效果，配合唯一ID、合理设置max-height及过渡动画优化体验，适用于无需JavaScript的交互场景。

css制作折叠面板展开效果

实现一个用CSS制作的折叠面板展开效果，关键在于利用:checked伪类结合<input type="checkbox">或

标签控制内容显示。下面是一个简洁、实用且无需JavaScript的纯CSS方案。

使用复选框和label实现折叠面板

通过隐藏的复选框与label联动，配合CSS过渡动画，实现平滑展开收起效果。

HTML结构如下：

  <input type="checkbox" id="panel1" class="accordion-toggle">
  点击展开/收起

这里是折叠面板的内容，可以是任意HTML元素。

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标签（更语义化）

如果不需要兼容老版本浏览器，可直接使用

和

，更简洁。

点击展开

这里是要展示的内容。

CSS添加过渡效果：

.details-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

details[open] .details-content {
  max-height: 100px;
  padding: 12px 0;
}