[学习交流] 【广州前端】bootstrap常用组件(三)折叠Collapse插件

【简介】

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. 效果

点击之后，要展示的内容缓慢下拉展开

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【广州前端】bootstrap常用组件(三)折叠Collapse插件

0 个回复