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。

过程奇怪，结果也奇怪。