如何用css制作简单折叠手风琴效果-css教程-PHP中文网

如何用css制作简单折叠手风琴效果

P粉602998670

发布： 2025-10-06 18:10:01

原创

182人浏览过

使用复选框和CSS实现手风琴效果：通过隐藏复选框控制内容区域的显示与隐藏，利用:checked伪类触发max-height变化实现展开收起动画，支持多面板独立操作。

如何用css制作简单折叠手风琴效果

实现一个简单的折叠手风琴效果，可以通过 HTML 和 CSS 结合使用复选框（checkbox）或利用 :target 伪类来控制内容的展开与收起。下面是一个基于复选框和 CSS 的纯前端实现方法，无需 JavaScript。

1. HTML 结构设计

使用 input[type="checkbox"] 隐藏复选框，通过点击标签（label）切换状态，控制内容区域的显示与隐藏。

示例代码：

<div class="accordion">
  <input type="checkbox" id="section1" class="accordion-toggle">
  <label for="section1" class="accordion-title">第一部分</label>
  <div class="accordion-content">
    <p>这里是第一部分内容。</p>
  </div>
</div>

2. 基础 CSS 样式

隐藏复选框，美化标题和内容区域，并设置内容默认隐藏。

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

.accordion {
  border: 1px solid #ddd;
  margin-bottom: 10px;
  border-radius: 4px;
  overflow: hidden;
}

.accordion-toggle {
  display: none;
}

.accordion-title {
  background-color: #f0f0f0;
  padding: 15px;
  font-weight: bold;
  cursor: pointer;
  display: block;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background-color: #fff;
  padding: 0 15px;
}

.accordion-toggle:checked + .accordion-title + .accordion-content {
  max-height: 200px; /* 根据内容调整高度 */
  padding: 15px;
}