如何用css制作简单折叠手风琴效果_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-10-06

浏览次数：次

返回列表

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

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

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

1. HTML 结构设计

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

示例代码：

  第一部分

这里是第一部分内容。

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