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>
  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>
下一节