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. 【P4语言学习】Parser解析器

    参考文章:王垠:谈谈Parser 簡單介紹 P4 語言(一)- Parser 什么是Parser 传统的parser,一般出现在编译器和编译原理课程中,援引<谈谈Parser>的定义: 首 ...

  2. java学习之浅谈多线程1

    创建任务和线程 任务就是对象,为了创建任务,必须首先为任务定义一个类.任务类必须实现Runnable接口.Runnable接口非常简单,它只有一个run方法.需要实现这个方法来告诉系统线程将如何运行. ...

  3. 递归--练习1--noi3089爬楼梯

    递归--练习1--noi3089爬楼梯 一.心得 根据输入,是要写连续输入多个值的程序 二.题目 3089:爬楼梯 总时间限制:  1000ms 内存限制:  65536kB 描述 树老师爬楼梯,他可 ...

  4. python实现本地批量ping多个IP

    本文主要利用python的相关模块进行批量ping ,测试IP连通性. 下面看具体代码(python3): #!/usr/bin/env python#-*-coding:utf-8-*- impor ...

  5. 2-14-1 MySQL基础语句,查询语句

    一. SQL概述 结构化查询语言(Structured Query Language)简称SQL 1. 它是一种特殊目的的编程语言 2. 它还是一种数据库查询和程序设计语言 (用于存取数据以及查询.更 ...

  6. Leetcode 64

    class Solution { public: int minPathSum(vector<vector<int>>& grid) { int n = grid.si ...

  7. 【Matplotlib】概要总览第一讲

    之前一直使用 matplotlib, 但都是随用随查,现在特开此系列帖子已记录其学习过程. Matplotlib可能是Python 扩展包中仅有的最流行的 2D 绘图库.她不仅提供了快速的方式可视化P ...

  8. 第一个mpvue小程序开发总结

    前言 说起小程序,其实在去年我都还只试着照着官方文档写过demo的,不过现在这家公司小程序做得比较多,我来之后也参与了几个小程序的开发了,最开始那几个是用的wepy,最近一个开始转用mpvue开发,最 ...

  9. 12.19 redis缓存

    ---恢复内容开始--- 命中:应用程序从key中获取数据,取到后返回 失效:到设置的失效时间后就失效 更新:应用程序把数据存到数据库中后又放回去 在项目中使用redis方法 结合业务场景,避免滥用 ...

  10. java垃圾回收期如何工作(编程思想)

    垃圾回收器如何工作: 在以前的程序语言中,在堆上分配对象的代价十分昂贵,因此读者会自然觉得对Java中所有对象(基本类型除外)都在堆上分配的方式也非常高昂.然而,垃圾回收期对提高对象的创建速度,却具有 ...