【简介】 bootstrap折叠(Collapse)插件可以很容易地让页面区域折叠起来。无论用它来创建折叠导航还是内容面板,它都允许很多内容选项。如手风琴式的切换和导航,提供基本和灵活的样式。 【引入文件】 需要引入的文件有bootstrap的css样式文件。因为bootstrap是基于jquery的,所以要先引入jq文件,再引入bootstrap的js文件。 [HTML] 纯文本查看 复制代码 <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] 纯文本查看 复制代码 <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. 效果 点击之后,要展示的内容缓慢下拉展开
|