【简介】
bootstrap
折叠（
Collapse
）插件可以很容易地让页面区域折叠起来。无论用它来创建折叠导航还是内容面板，它都允许很多内容选项。
如手风琴式的切换和导航，提供基本和灵活的样式。
【引入文件】
需要引入的文件有bootstrap的css样式文件。因为bootstrap是基于jquery的，所以要先引入jq文件，再引入bootstrap的js文件。
[HTML]
纯文本查看
复制代码
1 2 3 4 5 | <link rel="stylesheet" href="lib/css/bootstrap.css"><script src="lib/js/jquery.v1.12.4.js"></script><script src="lib/js/bootstrap.js"></script> |
【基本结构与效果】
1. Html代码结构，创建可折叠的分组或折叠面板（accordion）
[HTML]
纯文本查看
复制代码
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | <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"> 点击我进行展开，再次点击我进行折叠。 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> 黑马传智播客，黑马传智播客，黑马传智播客，黑马传智播客 黑马传智播客，黑马传智播客，黑马传智播客，黑马传智播客 黑马传智播客，黑马传智播客，黑马传智播客，黑马传智播客 </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"> 点击我进行展开，再次点击我进行折叠。 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> 前端与移动开发，前端与移动开发，前端与移动开发，前端与移动开发， 前端与移动开发，前端与移动开发，前端与移动开发，前端与移动开发， 前端与移动开发，前端与移动开发，前端与移动开发，前端与移动开发， </div> </div> </div></div> |
2. 注意
2.1 data-toggle="collapse" 添加到您想要展开或折叠的组件的链接上
2.2 href 或 data-target 属性添加到父组件，它的值是子组件的 id
2.3 data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接上
2.4 控制面板的内容一开始是显示还是隐藏状态，有in 这个样式控制的
3. 效果
点击之后，要展示的内容缓慢下拉展开
更多技术资讯可关注：gzitcast
