CSS手风琴菜单实现教程

使用

和

标签（最简单）

HTML5 提供了原生支持的折叠组件，语义清晰，兼容性良好。

  
菜单标题 1
  
这里是子菜单内容或链接列表...


菜单标题 2
更多内容...

默认就有点击展开/收起效果。CSS 可自定义样式：

details > summary {
  padding: 10px;
  cursor: pointer;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  list-style: none;
}
details > p {
margin: 10px 0;
padding: 0 15px;
display: block;
}

使用复选框 + CSS 实现多级手风琴

适合需要更复杂样式或动画的场景。

结构思路：
用隐藏的 控制状态，label 作为可点击标题，后续内容通过 :checked ~ 选择器显示。

  
  菜单 1
  

    
内容项 A
    
内容项 B
  

CSS 关键代码：

.accordion .accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.accordion-toggle:checked ~ .accordion-content {
max-height: 200px; / 根据内容调整 /
}

添加视觉优化：

• 给 label 添加箭头图标，用 ::after 实现
• 旋转箭头表示展开状态：.accordion-toggle:checked + .accordion-title::after { transform: rotate(180deg); }
• 设置合适的过渡时间让动画更自然

注意事项

使用 max-height 而不是 display: none/block，才能实现平滑过渡动画。

如果内容高度不固定，可设一个足够大的 max-height（如 500px），避免裁剪。

在移动端注意 touch 友好性，给可点击区域留足 padding。

基本上就这些。用原生标签最省事，自定义需求多就用 checkbox + CSS 方案。不复杂但容易忽略细节。

理论要掌握，实操不能落！以上关于《CSS手风琴菜单实现教程》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！