Bootstrap 折叠（Collapse）插件

折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。

用法

Class	描述
.collapse	隐藏内容。
.collapse.in	显示内容。
.collapsing	当过渡效果开始时被添加，当过渡效果完成时被移除。

您可以通过以下两种方式使用折叠（Collapse）插件：

通过 data 属性：向元素添加 data-toggle="collapse" 和 data-target，自动分配可折叠元素的控制。data-target 属性接受一个 CSS 选择器，并会对其应用折叠效果。请确保向可折叠元素添加 class .collapse。如果您希望它默认情况下是打开的，请添加额外的 class .in。

为了向可折叠控件添加类似折叠面板的分组管理，请添加 data 属性 data-parent="#selector"。
通过 JavaScript：可通过 JavaScript 激活 collapse 方法，如下所示：
```
$('.collapse').collapse()
```

一、基本使用

data-toggle="collapse" 添加到您想要展开或折叠的组件的链接上。
href 或 data-target 属性添加到父组件，它的值是子组件的 id。
data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接上。
class="collapse in" 会立即展开

        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Button with data-target</button><div class="collapse" id="collapseExample"><div class="well">折叠</div></div>

二、折叠和面板使用：手风琴效果

        <div class="panel-group" id="pg"><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#pg" href="#collapseOne">点击我进行展开，再次点击我进行折叠。第 1 部分</a></h4></div><div id="collapseOne" class="panel-collapse collapse in"><div class="panel-body">第 1 部分</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#pg" href="#collapseTwo">点击我进行展开，再次点击我进行折叠。第 2 部分</a></h4></div><div id="collapseTwo" class="panel-collapse collapse"><div class="panel-body">第 2 部分</div></div></div></div>

三、Javascript 实现手风琴效果

选项

有一些选项是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项：

选项名称	类型/默认值	Data 属性名称	描述
parent	selector 默认值：false	data-parent	如果提供了一个选择器，当可折叠项目显示时，指定父元素下的所有可折叠的元素将被关闭。这与传统的折叠面板（accordion）的行为类似 - 这依赖于 accordion-group 类。
toggle	boolean 默认值：true	data-

方法

方法	描述	实例
Options: .collapse(options)	激活内容为可折叠元素。接受一个可选的 options 对象。	$('#identifier').collapse({toggle: false })
Toggle: .collapse('toggle')	切换显示/隐藏可折叠元素。	$('#identifier').collapse('toggle')
Show: .collapse('show')	显示可折叠元素。	$('#identifier').collapse('show')
Hide: .collapse('hide')	隐藏可折叠元素。	$('#identifier').collapse('hide')

事件不怎么用

        <div class="panel-group" id="pg"><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" href="#" id="collapseOneBtn">点击我进行展开，再次点击我进行折叠。第 1 部分</a></h4></div><div id="collapseOne" class="panel-collapse collapse in"><div class="panel-body">第 1 部分</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" href="#" id="collapseTwoBtn">点击我进行展开，再次点击我进行折叠。第 2 部分</a></h4></div><div id="collapseTwo" class="panel-collapse collapse"><div class="panel-body">第 2 部分</div></div></div></div>

Javascript

$(function () {$("#collapseOneBtn").on("click",function () {$("#collapseOne").collapse({parent: $("#pg")}).collapse("toggle");})$("#collapseTwoBtn").on("click",function () {$("#collapseTwo").collapse({parent: $("#pg")}).collapse("toggle");})
});

详情参考官网或菜鸟教程：http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html

Bootstrap 折叠（Collapse）插件相关推荐

Bootstrap 折叠(collapse)插件面板
折叠插件(collapse)可以很容易地让页面区域折叠起来, 无论您是用它来创建折叠导航还是内容面板,它都允许很多内容选项. 您可以使用折叠插件 1.创建可折叠的分组或折叠的面板 <!DOCTY ...
Bootstrap 折叠插件Collapse 选项
选项 Bootstrap折叠插件Collapse有2 个选项,一个是parent,一个是toggle,所有的选项都可以通过 data 属性或JavaScript进行设置.见表 5‑7. 表 5‑7 B ...
Bootstrap 折叠插件Collapse 调用方式
调用方式 Bootstrap折叠插件Collapse的结构相对复杂,但调用比较简单,可以通过data属性调用,也可以通过JavaScript调用. 1.data 属性调用要激活折叠插件的激活行为,首 ...
bootstrap中jquery插件——collapse折叠效果-手风琴效果
先来掌握collapse插件的基本用法,再慢慢深入实例. collapse最基本的效果是像下图所示的,点击按钮可以显示/隐藏下面的元素: 实现代码如下: <a class="btn b ...
Bootstrap 折叠插件
折叠当列表菜单的条目特别多,而页面空间有限时,使用类似于手风琴的折叠菜单是不错的选择,因为它可以节约页面空间,方便用户浏览. 折叠插件需要 bootstrap-collapse.js 文件支持,在使 ...
CSS实现bootstrap的Collapse动态折叠和展开时箭头图标
CSS实现bootstrap的Collapse动态折叠和展开时箭头图标 bootstrap的折叠代码如下 <div class="accordion" id="ac ...
玩转Bootstrap（JS插件篇）
模态弹出框一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js ...
ACCP8.0Y2Web前端框架与移动应用开发第4章Bootstrap的JavaScript插件
杂记插件之间的依赖关系某些插件和 CSS 组件依赖于其它插件.如果你是单个引入每个插件的,请确保在文档中检查插件之间的依赖关系.注意,所有插件都依赖 jQuery (也就是说,jQuery必须在所 ...
Bootstrap Paginator分页插件+ajax
Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub Bootstrap分页插件属性介绍: http://www.cnblogs. ...
Bootstrap中DropDown插件显示下拉列表，点击下拉列表区域，不会再自动关闭。
目标: Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭. 参考:http://v3.bootcss.com/javascript/#dropdowns / ...

Bootstrap 折叠（Collapse）插件

Bootstrap 折叠（Collapse）插件

用法

一、基本使用

二、折叠和面板使用：手风琴效果

三、Javascript 实现手风琴效果

选项

方法

Bootstrap 折叠（Collapse）插件相关推荐

最新文章

热门文章

Bootstrap 折叠（Collapse）插件

Bootstrap 折叠（Collapse）插件

用法

一、基本使用

二、折叠和面板使用： 手风琴效果

三、Javascript 实现手风琴效果

选项

方法

Bootstrap 折叠（Collapse）插件相关推荐

最新文章

热门文章

二、折叠和面板使用：手风琴效果