2.3版本 | 3版本 |
---|---|
.accordion | .panel-group |
.accordion-group | .panel .panel-default |
.accordion-heading | .panel-heading |
.accordion-body | .panel-collapse |
.accordion-inner | .panel-body |
以3版本为例,代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 折叠面板</title>
<link rel="stylesheet" href="......./bootstrap.min.css">
<script src="........./jquery.min.js"></script>
<script src="..../bootstrap.min.js"></script>
</head>
<body>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">点击我进行展开,再次点击我进行折叠。第 1 部分
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">内容1</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo">点击我进行展开,再次点击我进行折叠。第 2 部分
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">内容2</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseThree">点击我进行展开,再次点击我进行折叠。第 3 部分
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">内容3</div>
</div>
</div>
</div>
</body>
</html>
效果展示: Bootstrap 实例 - 折叠面板
注意:
控制面板内容区是否可视。在Bootstrap框架中,如果想让内容区域不可视,只需要在 panel-collapse 样式上添加 collapse,每个面板的内容区都被隐藏起来了;若希望默认第一个面板内容是可视的,只需要在collapse基础上再追加 in 样式。简而言之,装载内容的div的父级div如果含有类in,则该内容的初始状态为打开。
定义data-parent属性,实现点击一个其中一个元素时,关闭所有的折叠区,再打开所单击的区域(如果所单击区域是展示的,则会关闭)。
bootstrap实现折叠面板功能,以上两个版本均可,可相互替换,又略有不同,详细介绍可参考bootstrap官网。
若内容的打开与关闭由button按钮控制,情况又会略有不同,详情不多介绍啦。
2017/00/00