选择折叠项collapse在网页中并不常用，不过也并不少见。
这也算是一个比较实用的组件。
折叠项collapse在默认情况下仅能有一项是处于打开状态的。
一、基本目标
使用Bootstrap来编写如下图的选择折叠项：
其中服务条款2在打开网页的时候就是打开状态。
点击不同的折叠项，其余的项就会收起，这项就会打开。
二、制作过程
1.同之前《【JavaScript】使用Bootstrap来编写一个在当前网页弹出的对话框，可以关闭，不用跳转，非弹窗》的第一步（点击打开链接）
因为需要使用Bootstrap，所以先在官网（点击打开链接）下载组件即可，用于生产环境的Bootstrap版本（点击打开链接），Bootstrap3对2并不兼容，建议直接根据其开发文档使用Bootstrap3。本文也是根据Bootstrap3制作。同时，Bootstrap3所提供的JavaScript效果需要到jQuery1.11（点击打开链接）支持，可以到jQuery官网中下载兼容旧浏览器IE6的jQuery1.11（点击打开链接），而不是不兼容旧浏览器IE6的jQuery2。下载完之后，配置好站点目录。把Bootstrap3直接解压到站点目录，而把jquery-1.11.1.js放到js目录，也就是与bootstrap.js同一目录，站点文件夹的结构大致如下：
2.本网页编码如下，下面一个片段一个片段进行分析：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选择折叠项</title>
<meta name="viewport"
content="width=device-width,initial-scale=1.0,user-scalable=no">
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="panel-group" id="accordion" role="tablist"
aria-multiselectable="true">
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapse1" aria-expanded="true" aria-controls="collapse1">
服务条款1 </a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<a href="http://1.com">点我进入某网页1</a>
<br />
本协议服务条款具有法律效力。
<br />
本协议服务条款具有法律效力。
<br />
本协议服务条款具有法律效力。
<br />
本协议服务条款具有法律效力
</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapse2" aria-expanded="true" aria-controls="collapse2">
服务条款2 </a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse in"
role="tabpanel">
<div class="panel-body">
<a href="http://2.com">点我进入某网页2</a>
<br />
本协议服务条款具有法律效力。
<br />
本协议服务条款具有法律效力。
<br />
本协议服务条款具有法律效力。
<br />
本协议服务条款具有法律效力
</div>
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapse3" aria-expanded="false" aria-controls="collapse3">
服务条款3 </a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<a href="http://3.com">点我进入某网页3</a>
<br />
本协议服务条款具有法律效力。
<br />
本协议服务条款具有法律效力。
<br />
本协议服务条款具有法律效力。
<br />
本协议服务条款具有法律效力
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapse4" aria-expanded="true" aria-controls="collapse4">
服务条款4 </a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<a href="http://1.com">点我进入某网页4</a>
<br />
本协议服务条款具有法律效力。
<br />
本协议服务条款具有法律效力。
<br />
本协议服务条款具有法律效力。
<br />
本协议服务条款具有法律效力
</div>
</div>
</div>
</div>
</body>
</html>
（1）<head>部分，同之前《【JavaScript】使用Bootstrap来编写一个在当前网页弹出的对话框，可以关闭，不用跳转，非弹窗》的<head>部分（点击打开链接）
<head>
<!--页面编码-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模态框</title>
<!--要求本网页自动适应PC、平板、手机等设备的屏幕-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<!--本例需要三个外部插件所支持-->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
collapse的布局如下图，
于是就有了如下代码：
<!--声明一个选择折叠项的布局-->
<div class="panel-group" id="accordion" role="tablist"
aria-multiselectable="true">
<!--这是每个选择折叠项的标题样式，有panel-default/info/success/warning/danger任君选择-->
<div class="panel panel-info">
<!--声明一个标题部分的布局-->
<div class="panel-heading">
<!--标题字体也可以通过样式修饰-->
<h4 class="panel-title">
<!--这么多参数的超级链接是根据bootstrap的中文文档添加的，为能够正确打开每一个选择折叠项做准备-->
<a data-toggle="collapse" data-parent="#accordion"
href="#collapse1" aria-expanded="true" aria-controls="collapse1">
服务条款1 </a>
</h4>
</div>
<!--这是为了tab快捷键能够在选择折叠项之间切换做准备，-->
<!--其中class="panel-collapse collapse"默认是关闭状态，class="panel-collapse collapse in"则默认为打开状态，-->
<!--每个总的选择折叠项，只能有一个class="panel-collapse collapse in"。-->
<div id="collapse1" class="panel-collapse collapse" role="tabpanel">
<!--选择折叠项主体的布局，中间能够放入任何东西-->
<div class="panel-body">
<a href="http://1.com">点我进入某网页1</a>
<br />
本协议服务条款具有法律效力。
<br />
本协议服务条款具有法律效力。
<br />
本协议服务条款具有法律效力。
<br />
本协议服务条款具有法律效力
</div>
</div>
</div>
<!--下面的每一个选择折叠项的道理是完全一样的，不再赘述-->
<div class="panel panel-warning">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapse2" aria-expanded="true" aria-controls="collapse2">
服务条款2 </a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse in"
role="tabpanel">
<div class="panel-body">
<a href="http://2.com">点我进入某网页2</a>
<br />
本协议服务条款具有法律效力。
<br />
本协议服务条款具有法律效力。
<br />
本协议服务条款具有法律效力。
<br />
本协议服务条款具有法律效力
</div>
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapse3" aria-expanded="false" aria-controls="collapse3">
服务条款3 </a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<a href="http://3.com">点我进入某网页3</a>
<br />
本协议服务条款具有法律效力。
<br />
本协议服务条款具有法律效力。
<br />
本协议服务条款具有法律效力。
<br />
本协议服务条款具有法律效力
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapse4" aria-expanded="true" aria-controls="collapse4">
服务条款4 </a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<a href="http://1.com">点我进入某网页4</a>
<br />
本协议服务条款具有法律效力。
<br />
本协议服务条款具有法律效力。
<br />
本协议服务条款具有法律效力。
<br />
本协议服务条款具有法律效力
</div>
</div>
</div>
</div>
（1）<head>部分
<head>
<!--页面编码-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模态框</title>
<!--要求本网页自动适应PC、平板、手机等设备的屏幕-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<!--本例需要三个外部插件所支持-->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
【JavaScript】使用Bootstrap来编写 选择折叠项collapse
原文：http://blog.csdn.net/yongh701/article/details/40626447