css制作折叠面板展开效果-css教程-PHP中文网

css制作折叠面板展开效果

P粉602998670

发布： 2025-10-28 20:13:01

原创

734人浏览过

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

css制作折叠面板展开效果

实现一个用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样式设置：

立即学习“前端免费学习笔记（深入）”；

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

.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;
}