折叠

.collapse隐藏条目, .collapse.in显示条目。

调用方式一：仅仅通过向页面元素添加data-toggle="collapse" 和data-target就可以为其赋予控制可折叠页面元素的能力。 data-target属性接受一个CSS选择器作为其控制对象。请确保为可折叠页面元素添加.collapse。如果你希望可折叠页面元素的默认状态是展开的，请添加.in。为了给一组可折叠页面元素添加控制器，添加data-parent="#selector"即可

调用方式二：手动触发$(".collapse").collapse()

类型

结合面板

Item 1

The content of Item1..panel-collapse .collapse .fade

Item 2

The content of Item2. .panel-collapse .collapse .in默认显示。

Item 3

The content of item3. .panel-collapse .collapse

结合按钮

Ho la la hu la la, hu la hu la.

变化

方法和事件

方法	例子	描述
.collapse(options)	`$('#myCollapse').collapse({ toggle: false })`	赋予页面元素可折叠功能。接受一个可选的object作为参数。
.collapse('toggle')	`$('#myCollapse').collapse('toggle')`	展示或隐藏一个可折叠的页面元素。
.collapse('show')	`$('#myCollapse').collapse('show')`	展示一个可折叠页面元素。
.collapse('hide')	`$('#myCollapse').collapse('hide')`	隐藏一个可折叠页面元素。

事件	使用	描述
show.bs.collapse	`$('#myCollapse').on('show.bs.collapse', function () { // do something… })`	当`show`方法被调用时，此事件将被立即触发。
shown.bs.collapse	`$('#myCollapse').on('shown.bs.collapse', function () { // do something… })`	当可折叠页面元素显示出来之后（同时CSS过渡效果也已执行完毕），此事件被触发。
hide.bs.collapse	`$('#myCollapse').on('hide.bs.collapse', function () { // do something… })`	当`hide`方法被调用时，此事件将被立即触发。
hidden.bs.collapse	`$('#myCollapse').on('hidden.bs.collapse', function () { // do something… })`	当可折叠页面元素隐藏之后（同时CSS过渡效果也已执行完毕），此事件被触发。