<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="
CSS/bootstrap.css"/>
</head>
<body>
<!--1.把所有的面板放到一个父级里，并且给父级添加class="panel-group" id="自己定义一个"属性
2.给要点击的元素添加一个data-parent="#父级元素的id"属性
3.需要给内容区域添加一个collapse的class属性-->
<div class="container">
<div class="row">
<div class="col-lg-5">
<div class="panel-group" id="accodion"><!--accodion中文意思为手风琴-->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" data-parent="#accodion" data-toggle="collapse" data-target="#con1">海棠学院</h3>
</div>
<div id="con1" class="collapse">
<div class="panel-body">
专注前端设计
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" data-parent="#accodion" data-toggle="collapse" data-target="#con2">海棠学院</h3>
</div>
<div id="con2" class="collapse">
<div class="panel-body">
专注前端设计
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" data-parent="#accodion" data-toggle="collapse" data-target="#con3">海棠学院</h3>
</div>
<div id="con3" class="collapse">
<div class="panel-body">
专注前端设计
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<scr
ipt src="js/jquery-2.1.0.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
实现的效果：
点击某一个，展开内容，在点击另外一个，继续展开并且上一个收回去。后续点开任一个其余的都收回去，只展开当前的。
