5-1 手风琴（Collapse）
本节编程练习不计算学习进度，请电脑登录imooc.com操作

手风琴（Collapse）

插件源文件：collapse.js

引用地址：

<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-collapse.min.js"></script>

Bootstrap 框架中 Collapse插件(折叠)其实就是我们常见的手风琴效果。点击标题，可以让其对应的内容显示或隐藏。如下图所示：

任务

观察右侧代码，这里引用插件没有使用单独引入的方法，而是使用全部引入的方式：

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
index.html 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>手风琴（Collapse）</title>
  6. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  7. <style>body{padding:10px;margin:10px}</style>
  8. </head>
  9. <body>
  10. <div class="panel-group" id="accordion">
  11.     <div class="panel panel-default">
  12.         <div class="panel-heading">
  13.             <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">标题一</a></h4>
  14.         </div>
  15.         <div id="collapseOne" class="panel-collapse collapse in">
  16.             <div class="panel-body">标题一对应的内容</div>
  17.         </div>
  18.     </div>
  19.     <div class="panel panel-default">
  20.         <div class="panel-heading">
  21.             <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">标题二</a></h4>
  22.         </div>
  23.         <div id="collapseTwo" class="panel-collapse collapse">
  24.             <div class="panel-body">标题二对应的内容</div>
  25.         </div>
  26.     </div>
  27.     <div class="panel panel-default">
  28.         <div class="panel-heading">
  29.             <h4 class="panel-title"><a data-toggle="collapse"data-parent="#accordion"href="#collapseThree">标题三</a></h4>
  30.         </div>
  31.         <div id="collapseThree" class="panel-collapse collapse">
  32.             <div class="panel-body">标题三对应的内容</div>
  33.         </div>
  34.     </div>
  35. </div>
  36. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  37. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  38.  
  39. </body>
  40. </html>
下一节