bootstrap collaspe
和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的更多相关文章
- 旺财速啃H5框架之Bootstrap(五)
在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...
- 旺财速啃H5框架之Bootstrap(四)
上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...
- bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序
也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...
- 参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...
- Bootstrap 模态框(Modal)插件
页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 利用bootstrap的carousel.js实现轮播图动画
前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...
- 旺财速啃H5框架之Bootstrap(三)
好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...
- 旺财速啃H5框架之Bootstrap(二)
突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经把bootstrap了解个大概了,接 ...
- 旺财速啃H5框架之Bootstrap(一)
接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...
随机推荐
- 登陆sharepoint的主页,提示:文件存在(异常来自 HRESULT:0x80070050)
用sharepoint搭建了Project2007的服务器之后,由于我们公司管理域的服务器崩溃了,必须重新再加一次域,而域和服务器是关联的,即使域的名字一样,但该名字所对应的ID是不一样的,会导致一些 ...
- zset
zset sorted set,有序集合 元素为string类型 元素具有唯一性,不重复 每个元素都会关联一个double类型的score,表示权重,通过权重将元素从小到大排序 说明:没有修改操作 增 ...
- DNN例子
[Tensorflow DNNClassifier ValueError]http://stackoverflow.com/questions/40264622/tensorflow-dnnclass ...
- SQL 变量、 运算符、 if 、while
变量: SQL语言也跟其他编程语言一样,拥有变量.分支.循环等控制语句. 在SQL语言里面把变量分为局部变量和全局变量,全局变量又称系统变量. 局部变量: 使用declare关键字给变量声明,语法非常 ...
- edgeR
1)简介 edgeR作用对象是count文件,rows 代表基因,行代表文库,count代表的是比对到每个基因的reads数目.它主要关注的是差异表达分析,而不是定量基因表达水平. edgeR wor ...
- 在Ubuntu上安装微信
1) 从https://github.com/geeeeeeeeek/electronic-wechat/releases地址中下载linux-x64.tar.gz文件到/opt/wechat文件夹 ...
- select 1 与 select null (转)
1.Select 1 在这里我主要讨论的有以下几个select 语句: table表是一个数据表,假设表的行数为10行,以下同. 1:select 1 from table 2:select cou ...
- 求2的n次方对1e9+7的模,n大约为10的100000次方(费马小定理)
昨天做了一个题,简化题意后就是求2的n次方对1e9+7的模,其中1<=n<=10100000.这个就算用快速幂加大数也会超时,查了之后才知道这类题是对费马小定理的考察. 费马小定理:假如p ...
- Java finalize以及Garbage Collection
Java的垃圾回收机制: Java的垃圾回收并不等于C++中的析构.Java中,只有在程序濒临存储空间用完的那一刻,对象占用的空间才会释放.所以,在JAVA程序中,我们通常只考虑创建对象,而从不关心对 ...
- leetcode 183. Customers Who Never Order
select Name as Customers from Customers where Id not in (select CustomerId from Orders);