ylbtech-Bootstrap-Plugin:折叠(Collapse)插件
1.返回顶部
1、

Bootstrap 折叠(Collapse)插件

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

如果您想要单独引用该插件的功能,那么您需要引用 collapse.js。同时,也需要在您的 Bootstrap 版本中引用 Transition(过渡)插件。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js

您可以使用折叠(Collapse)插件:

  • 创建可折叠的分组或折叠面板(accordion),如下所示:

    实例

    <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">
    点击我进行展开,再次点击我进行折叠。第 1 部分
    </a>
    </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
    <div class="panel-body">
    Nihil anim keffiyeh helvetica, craft beer labore wes anderson
    cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
    vice lomo.
    </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">
    点击我进行展开,再次点击我进行折叠。第 2 部分
    </a>
    </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
    <div class="panel-body">
    Nihil anim keffiyeh helvetica, craft beer labore wes anderson
    cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
    vice lomo.
    </div>
    </div>
    </div>
    <div class="panel panel-default">
    <div class="panel-heading">
    <h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion"
    href="#collapseThree">
    点击我进行展开,再次点击我进行折叠。第 3 部分
    </a>
    </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
    <div class="panel-body">
    Nihil anim keffiyeh helvetica, craft beer labore wes anderson
    cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
    vice lomo.
    </div>
    </div>
    </div>
    </div>

    尝试一下 »

    结果如下所示:

    1. data-toggle="collapse" 添加到您想要展开或折叠的组件的链接上。
    2. href 或 data-target 属性添加到父组件,它的值是子组件的 id
    3. data-parent 属性把折叠面板(accordion)的 id 添加到要展开或折叠的组件的链接上。
  • 创建不带 accordion 标记的简单的可折叠组件(collapsible),如下所示:

    实例

    <button type="button" class="btn btn-primary" data-toggle="collapse"
    data-target="#demo">
    简单的可折叠组件
    </button>
    <div id="demo" class="collapse in">
    Nihil anim keffiyeh helvetica, craft beer labore wes anderson
    cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
    vice lomo.
    </div>

    尝试一下 »

    结果如下所示:

    正如您在实例中看到的,我们创建了一个可折叠的组件,与折叠面板(accordion)不同,我们没有添加属性 data-parent

用法

下表列出了折叠(Collapse)插件用于处理繁重的伸缩的 class:

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 属性或 JavaScript 来传递的。下表列出了这些选项:

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

方法

下面是一些折叠(Collapse)插件中有用的方法:

方法 描述 实例
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="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseOne">
点击我进行展开,再次点击我进行折叠。第 1 部分--hide 方法
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
lomo.
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo">
点击我进行展开,再次点击我进行折叠。第 2 部分--show 方法
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
lomo.
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseThree">
点击我进行展开,再次点击我进行折叠。第 3 部分--toggle 方法
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
lomo.
</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseFour">
点击我进行展开,再次点击我进行折叠。第 4 部分--options 方法
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
lomo.
</div>
</div>
</div>
</div>
<script>
$(function () { $('#collapseFour').collapse({
toggle: false
})});
$(function () { $('#collapseTwo').collapse('show')});
$(function () { $('#collapseThree').collapse('toggle')});
$(function () { $('#collapseOne').collapse('hide')});
</script>

尝试一下 »

结果如下所示:

事件

下表列出了折叠(Collapse)插件中要用到的事件。这些事件可在函数中当钩子使用。

事件 描述 实例
show.bs.collapse 在调用 show 方法后触发该事件。
$('#identifier').on('show.bs.collapse', function () {
    // 执行一些动作...
})
shown.bs.collapse 当折叠元素对用户可见时触发该事件(将等待 CSS 过渡效果完成)。
$('#identifier').on('shown.bs.collapse', function () {
    // 执行一些动作...
})
hide.bs.collapse 当调用 hide 实例方法时立即触发该事件。
$('#identifier').on('hide.bs.collapse', function () {
    // 执行一些动作...
})
hidden.bs.collapse 当折叠元素对用户隐藏时触发该事件(将等待 CSS 过渡效果完成)。
$('#identifier').on('hidden.bs.collapse', function () {
    // 执行一些动作...
})

实例

下面的实例演示了事件的用法:

实例

<div class="panel-group" id="accordion">
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseexample">
点击我进行展开,再次点击我进行折叠。--shown 事件
</a>
</h4>
</div>
<div id="collapseexample" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident.
Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
</div> <script>
$(function () {
$('#collapseexample').on('show.bs.collapse', function () {
alert('嘿,当您展开时会提示本警告');})
});
</script>

尝试一下 »

结果如下所示:

2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
11.返回顶部
 
作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

Bootstrap-Plugin:折叠(Collapse)插件的更多相关文章

  1. BootStrap中的collapse插件堆叠效果

    通过网络上的一系列查找,总结出的collapse插件堆叠效果(网上没有找到,只能自己弄了,帮助那些和我遇到一样状况的同学) 首先感谢一位网友的知识总结给了我灵感,在这里先帮他推荐一波(https:// ...

  2. Bootstrap 折叠(collapse)插件面板

    折叠插件(collapse)可以很容易地让页面区域折叠起来, 无论您是用它来创建折叠导航还是内容面板,它都允许很多内容选项. 您可以使用折叠插件 1.创建可折叠的分组或折叠的面板 <!DOCTY ...

  3. 折叠Collapse插件

    实例 折叠(Collapse)插件可以很容易地让页面区域折叠起来.无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项. .collapse 隐藏内容. .collapse.in 显示内容. . ...

  4. bootstrap 支持的JavaScript插件

    一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js). 具体使 ...

  5. 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用

    Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...

  6. 基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  7. Bootstrap <基础三十一>插件概览

    在前面布局组件中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使不是一名高级的 JavaScript 开发人员,也可以着手 ...

  8. Bootstrap文件上传插件File Input的使用

    基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用 Bootstrap文件上传插件File Input是一个不错的文件上传控件, ...

  9. bootstrap风格的multiselect插件——类似邮箱收件人样式

    在开发颗粒云邮箱的过程中,遇到了一个前端的问题,就是邮箱收件人的那个multiselect的input输入框.不仅能够多选,还要能够支持ajax搜索,把联系人搜索出来.就是类似下面的这个东西: 网上找 ...

  10. bootstrap学习以及其插件

    Bootstrap中文网地址,里面有bootstrap组件的下载与使用说明,现在使用bootstrap3: http://www.bootcss.com/ W3CSchool.CC里面有学习boots ...

随机推荐

  1. luogu p3366 最小生成树模板

    倒腾了一个小时  自己也没去看网上的 总算自己能写出来模板了 kruskal //最小生成树 每次找最短的边 #include<bits/stdc++.h> using namespace ...

  2. 计算机基础教程11 - 互联网&内联网

    在本章中,我们将看到什么是Internet和Intranet,以及讨论两者之间的异同. 互联网 它是互联计算机网络的全球/全球系统.它使用标准的Internet协议(TCP / IP).Interne ...

  3. 2015-9-13 NOIP模拟赛 by hzwer

    好老的题了,但是还是很有做头的. 总结 不吸氧看来确实是没法用stl的啊(set常数太大了,开O2也没过) SPFA没认真学,觉得有堆优化Dijkstra就天下无敌了,今天负边权教我做人 于是苦逼的只 ...

  4. POJ 2513 Colored Sticks(欧拉道路+字典树+并查集)

    http://poj.org/problem?id=2513 题意: 给定一些木棒,木棒两端都涂上颜色,求是否能将木棒首尾相接,连成一条直线,要求不同木棒相接的一边必须是相同颜色的. 思路: 题目很明 ...

  5. mongodb的安装与增删改查

    mongodb是一款分布式的文件存储的数据库,注意这两个词,分布式和文件存储.mongodb支持复制和分片,可以合理的运用空间的大小,也可以达到容灾的目的.另外文件存储也是一个特点,抛弃了传统的表的概 ...

  6. django 常用字段类型

    <> CharField #字符串字段, 用于较短的字符串. #CharField 要求必须有一个参数 maxlength, 用于从数据库层和Django校验层限制该字段所允许的最大字符数 ...

  7. OpenGL超级宝典笔记——遮挡查询 [转]

    目录[-] 遮挡查询之前 包围体 遮挡查询 在一个场景中,如果有有些物体被其他物体遮住了不可见.那么我们就不需要绘制它.在复杂的场景中,这可以减少大量的顶点和像素的处理,大幅度的提高帧率.遮挡查询就是 ...

  8. Hive之序列化与反序列化(SerDe)

    序列化与反序列化的作用 1,序列化是对象转化为字节序列的过程: 2,反序列化是字节码恢复为对象的过程: 序列化的作用主要有两个: (1),对象向的持久化:即把对象转换成字节码后保存文件: (2),对象 ...

  9. Vue.js图片预览插件

    vue-picture-preview-extend vue-picture-preview的扩展版本,本文中插件是由其他大神开发,我做了一些扩展,原文链接:https://segmentfault. ...

  10. Linux安装MySQL遇到的问题

    安装: https://www.cnblogs.com/fnlingnzb-learner/p/5830622.html https://www.cnblogs.com/xinjing-jingxin ...