如何在CSS初级项目中制作手风琴效果_max-height transition结合实现

新闻中心 NEWS CENTER

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

如何在CSS初级项目中制作手风琴效果_max-height transition结合实现

2025-11-27

浏览次数：次

返回列表

利用max-height和transition实现CSS手风琴效果，通过隐藏复选框的:checked状态控制内容展开与收起，配合overflow:hidden完成平滑过渡动画，适用于FAQ等场景，无需J*aScript。

如何在css初级项目中制作手风琴效果_max-height transition结合实现

在CSS初级项目中实现手风琴效果，可以利用 max-height 配合 transition 来控制内容的展开与收起。这种方法不需要J*aScript也能完成基础动效，适合用于FAQ、菜单折叠等场景。

原理说明：为什么用 max-height？

直接对 height 使用 transition 对 auto 值无效，因为“auto”不是一个可计算的数值，无法进行平滑过渡。而 max-height 可以设置一个足够大的值（如 0 到 500px），通过改变它来模拟展开/收起效果。

基本结构（HTML）

<div class="accordion">
  <input type="checkbox" id="item1" />
  <label for="item1">标题 1</label>
  <div class="content">
    <p>这里是内容文本……</p>
  </div>
</div>

使用隐藏的复选框 <input type="checkbox"> 结合 :checked 伪类来控制状态切换，label 作为可点击区域，触发显示/隐藏。

语鲸

AI智能阅读辅助工具

314 查看详情

CSS 样式实现

.accordion {
  width: 100%;
  margin-bottom: 10px;
}
<p>.accordion input[type="checkbox"] {
display: none; /<em> 隐藏输入框 </em>/
}</p><p>.accordion label {
display: block;
background: #f0f0f0;
padding: 10px;
cursor: pointer;
border: 1px solid #ddd;
font-weight: bold;
}</p><p>.accordion .content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
background: #fff;
padding: 0 10px;
}</p><p>/<em> 展开状态：max-height 设为足够大 </em>/
.accordion input[type="checkbox"]:checked ~ .content {
max-height: 500px; /<em> 根据内容调整此值 </em>/
}</p>

当复选框被选中时，后续的 .content 元素的 max-height 从 0 过渡到 500px，实现展开动画；取消选中则恢复为 0，内容被隐藏。

优化建议

max-height 数值选择：设得太小可能导致内容被裁剪，太大则动画时间不自然。建议根据实际内容高度设定略大一些的值（如 200px~600px）。
使用预处理器或CSS变量：便于统一管理多个手风琴项的动画时间或高度。
考虑无障碍性：可用 <button></button> 替代 label，并结合 aria-expanded 提升可访问性。
多面板同时展开：使用 type="checkbox" 允许多个同时打开；若要单选，改用 type="radio" 并设置相同 name 属性即可。