手風(fēng)琴（Collapse）
插件源文件：collapse.js
引用地址：
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-collapse.min.js"></script>
Bootstrap 框架中 Collapse插件(折疊)其實(shí)就是我們常見的手風(fēng)琴效果。點(diǎn)擊標(biāo)題，可以讓其對(duì)應(yīng)的內(nèi)容顯示或隱藏。如下圖所示：
任務(wù)
觀察右側(cè)代碼，這里引用插件沒有使用單獨(dú)引入的方法，而是使用全部引入的方式：
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>手風(fēng)琴（Collapse）</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>body{padding:10px;margin:10px}</style>
</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">標(biāo)題一</a></h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">標(biāo)題一對(duì)應(yīng)的內(nèi)容</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">標(biāo)題二</a></h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">標(biāo)題二對(duì)應(yīng)的內(nèi)容</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">標(biāo)題三</a></h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">標(biāo)題三對(duì)應(yīng)的內(nèi)容</div>
</div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
