CSS实现折叠面板｜DuMengjie's blog

前言

效果展示

折叠面板是网页中常见的效果之一，在jQuery UI和Bootstrap中都有相关的实现，但都需要依赖js。如果不想引入js代码，其实纯CSS也可以实现，只是功能上有些简化。

具体的实现方法总结了两种，第一种使用radio控件模拟，第二种使用CSS3的:target伪类。

Radio实现

name值相同的单选按钮，在同一时间只能有一个被选中，利用这一特性便可以实现折叠菜单。首先将label标签和input按钮绑定，然后隐藏input，点击label标签，相应input被选中，再利用:checked伪类和相邻兄弟选择器使相应div显示即可。

HTML

<div class="menuItem">
	<label for="item1"><a>商业平台学院</a></label>
	<input type="radio" name="item" id="item1">
	<div class="detail">
		<p>商业平台学院是百度商业体系最大的前端团队，所在部门主要负责百度核心商业产品推广平台的建设，包括搜索推广和信息流推广，是公司绝大部分收入的来源。学院不仅提供Web前端、还有iOS、Android方向供大家学习。商业平台学院欢迎你的到来！</p>
	</div>
</div>
<div class="menuItem">...</div>
<div class="menuItem">...</div>

CSS

.menuItem label + input { /*input隐藏*/
  display: none; 
}
.menuItem .detail { /*.detail隐藏*/
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}
.menuItem input:checked + detail { /*input选中时，相应detail显示*/
  height: 120px;
}

:target伪类实现

目标伪类选择器:targrt是众多实用的CSS3特性之一，它会选取链接a标签的目标元素。既然如此，那我们只需要给内容容器指定id，将a标签链接到这些容器即可动态的修改属性。

HTML

<div class="menuItem">
	<h2><a href="#item1">商业平台学院</a></h2>
	<p id="item1">商业平台学院是百度商业体系最大的前端团队，所在部门主要负责百度核心商业产品推广平台的建设，包括搜索推广和信息流推广，是公司绝大部分收入的来源。学院不仅提供Web前端、还有iOS、Android方向供大家学习。商业平台学院欢迎你的到来！</p>
</div>
<div class="menuItem">...</div>
<div class="menuItem">...</div>

CSS

.menuItem p {
  height: 0;
  overflow: hidden;
  transition: height 0.5s ease;
}
.menuItem p:target {
  height: 120px;
}

总结

利用CSS3强大的选择器可以实现很多神奇的效果，但是这两种实现方法仍有一些缺陷，例如：任意时刻必有一个菜单项是展开状态，单击同一菜单项无法实现隐藏/展示状态切换，无法自适应高度，只能设置固定高度等等。但这两种方法足以应对大多数情况了，以后如果有机会会再进行优化的。

前言
Radio实现
:target伪类实现
总结

CSS实现折叠面板

前言

Radio实现

:target伪类实现

总结

FEATURED TAGS

FRIENDS