当前位置：首页 > 文章列表 > 文章 > 前端 > CSS折叠面板制作方法详解

CSS折叠面板制作方法详解

2026-01-06 15:45:35 0浏览收藏

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《CSS折叠面板制作教程》，聊聊，希望可以帮助到正在努力赚钱的你。

答案：通过HTML与CSS结合:checked和兄弟选择器实现无JS折叠面板。使用隐藏复选框控制内容显隐，配合过渡效果和语义化标签提升体验，支持多面板与可访问性。

如何通过css制作折叠面板

实现一个通过CSS制作的折叠面板，关键在于利用HTML结构与CSS交互效果（如:checked伪类和相邻兄弟选择器）来控制内容的展开与收起。不需要JavaScript也能完成基本功能。

1. 基本HTML结构

使用input[type="checkbox"]作为控制开关，配合作为可点击的标题，再用一个容器存放面板内容。


  
  点击展开/收起
  
    这里是折叠面板的内容，可以是任意HTML元素。

2. 核心CSS样式

通过隐藏复选框，利用模拟按钮，并控制内容区域的显示与隐藏。

.accordion {
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
}
.accordion-toggle {
display: none;
}
.accordion-title {
background-color: #f5f5f5;
padding: 15px;
cursor: pointer;
font-weight: bold;
border-bottom: 1px solid #ddd;
}
.accordion-title::before {
content: "+";
display: inline-block;
margin-right: 8px;
}
.accordion-toggle:checked + .accordion-title::before {
content: "−";
}
.accordion-content {
max-height: 0;
overflow: hidden;
background-color: #fff;
transition: max-height 0.3s ease;
}
.accordion-toggle:checked ~ .accordion-content {
max-height: 200px; / 根据内容调整高度 /
}