和modal类似:也是通过data-toggle, data-target来指定;

可以把折叠插件改为手风琴,如果指定data-parent,那这个data-parent元素下的折叠插件就会像手风琴一样,打开一个,其他的都关了。

每个折叠元素的id都是需要的。

添加- + *,来实现折叠,展开,删除的功能

简单地折叠

两个触发方式

1、href:data-toggle='collapse' href='#collapseCon' aria-expended='false' aria-controls='collapseCon'

2、data-target:data-toggle='collapse' data-target='#collapseCon' aria-expended='false' aria-controls='collapseCon' 

容器为#collapseCon,

class有三种情况

1、collapse: 隐藏内容

2、collapsing:动画

3、collapse in:展示内容

手风琴的例子:使用href;如果指定data-parent,那这个data-parent元素下的折叠插件就会像手风琴一样,打开一个,其他的都关了。

也可以使用.list-group代替panel-body

aria-expended的作用:

如果默认关闭,则aria-expended=false;

如果默认打开,则aria-expended=true;

aria-control指向容器

这两个属性都是为了屏幕阅读器和其他敏感设备

使用js激活

.collapse('toggle');

.collapse('show');

.collpase('hide');

事件

$('#cc').on('hidden.bs.collapse', function(){

})

show.bs.collapse

shown.bs.collapse

hide.bs.collpase

hidden.bs.collapse

碰到一个奇怪的问题:

刚开始collapse,执行.collapse('hide'),则会打开;

这种情况,如果给show和hide加断点,则会先show,再hide。

过程奇怪,结果也奇怪。

  

bootstrap collaspe的更多相关文章

  1. 旺财速啃H5框架之Bootstrap(五)

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  2. 旺财速啃H5框架之Bootstrap(四)

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  3. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

  4. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  5. Bootstrap 模态框(Modal)插件

    页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. 利用bootstrap的carousel.js实现轮播图动画

    前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...

  7. 旺财速啃H5框架之Bootstrap(三)

    好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...

  8. 旺财速啃H5框架之Bootstrap(二)

    突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经把bootstrap了解个大概了,接 ...

  9. 旺财速啃H5框架之Bootstrap(一)

    接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...

随机推荐

  1. 登陆sharepoint的主页,提示:文件存在(异常来自 HRESULT:0x80070050)

    用sharepoint搭建了Project2007的服务器之后,由于我们公司管理域的服务器崩溃了,必须重新再加一次域,而域和服务器是关联的,即使域的名字一样,但该名字所对应的ID是不一样的,会导致一些 ...

  2. zset

    zset sorted set,有序集合 元素为string类型 元素具有唯一性,不重复 每个元素都会关联一个double类型的score,表示权重,通过权重将元素从小到大排序 说明:没有修改操作 增 ...

  3. DNN例子

    [Tensorflow DNNClassifier ValueError]http://stackoverflow.com/questions/40264622/tensorflow-dnnclass ...

  4. SQL 变量、 运算符、 if 、while

    变量: SQL语言也跟其他编程语言一样,拥有变量.分支.循环等控制语句. 在SQL语言里面把变量分为局部变量和全局变量,全局变量又称系统变量. 局部变量: 使用declare关键字给变量声明,语法非常 ...

  5. edgeR

    1)简介 edgeR作用对象是count文件,rows 代表基因,行代表文库,count代表的是比对到每个基因的reads数目.它主要关注的是差异表达分析,而不是定量基因表达水平. edgeR wor ...

  6. 在Ubuntu上安装微信

    1) 从https://github.com/geeeeeeeeek/electronic-wechat/releases地址中下载linux-x64.tar.gz文件到/opt/wechat文件夹 ...

  7. select 1 与 select null (转)

    1.Select 1 在这里我主要讨论的有以下几个select 语句: table表是一个数据表,假设表的行数为10行,以下同. 1:select  1 from table 2:select cou ...

  8. 求2的n次方对1e9+7的模,n大约为10的100000次方(费马小定理)

    昨天做了一个题,简化题意后就是求2的n次方对1e9+7的模,其中1<=n<=10100000.这个就算用快速幂加大数也会超时,查了之后才知道这类题是对费马小定理的考察. 费马小定理:假如p ...

  9. Java finalize以及Garbage Collection

    Java的垃圾回收机制: Java的垃圾回收并不等于C++中的析构.Java中,只有在程序濒临存储空间用完的那一刻,对象占用的空间才会释放.所以,在JAVA程序中,我们通常只考虑创建对象,而从不关心对 ...

  10. leetcode 183. Customers Who Never Order

    select Name as Customers from Customers where Id not in (select CustomerId from Orders);