<!DOCTYPE html>
<html lang="zh-cn">
<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 href="./css/bootstrap.css" rel="stylesheet">
<script src="./js/html5shiv.min.js"></script>
<script src="./js/respond.min.js"></script>
</head>
<body>
<div class="container">
<h3>bootstrap第四部分:插件---折叠效果</h3>
<h3>折叠效果应用1:手风琴</h3>
<div class="panel-group" id="pg">
<!--第一个面板-->
<div class="panel panel-danger">
<div class="panel-heading">
<a class="panel-title" data-parent="#pg" data-toggle="collapse" href="#xyj">西游记简介</a>
</div>
<div id="xyj" class="collapse in panel-collapse">
<div class="panel-body">
讲述了一个和尚和四个动物的故事
讲述了一个和尚和四个动物的故事
讲述了一个和尚和四个动物的故事
讲述了一个和尚和四个动物的故事
讲述了一个和尚和四个动物的故事
讲述了一个和尚和四个动物的故事
</div>
</div>
</div>
<!--第二个面板-->
<div class="panel panel-success">
<div class="panel-heading">
<a class="panel-title" data-parent="#pg" data-toggle="collapse" href="#shz">水浒传简介</a>
</div>
<div id="shz" class="collapse panel-collapse">
<div class="panel-body">
讲述了105个男人和三个女人的故事
讲述了105个男人和三个女人的故事
讲述了105个男人和三个女人的故事
讲述了105个男人和三个女人的故事
讲述了105个男人和三个女人的故事
讲述了105个男人和三个女人的故事
讲述了105个男人和三个女人的故事
讲述了105个男人和三个女人的故事
</div>
</div>
</div>
<!--第三个面板-->
<div class="panel panel-info">
<div class="panel-heading">
<a class="panel-title" data-parent="#pg" data-toggle="collapse" href="#sgz">三国志简介</a>
</div>
<div id="sgz" class="collapse panel-collapse">
<div class="panel-body">
讲述了一群人打群架的故事
讲述了一群人打群架的故事
讲述了一群人打群架的故事
讲述了一群人打群架的故事
讲述了一群人打群架的故事
讲述了一群人打群架的故事
讲述了一群人打群架的故事
讲述了一群人打群架的故事
</div>
</div>
</div>
</div>
</div>
<script src="./js/jquery-1.11.3.js"></script>
<script src="./js/bootstrap.js"></script>
</body>
</html>给panel-group加id,每个a加data-parent属性指向panel-group的id,即可实现只能有一个展开的效果