插件用于显示和隐藏内容。按钮或锚点用作触发器,映射到您切换的特定元素。折叠元素会将height从其当前值设置为0.使用CSS处理动画的方式,您不能在.collapse上使用padding相反,使用该类作为独立的包装元素.
点击下面任何一个按钮,通过类更改显示和隐藏另一个class包含的元素:
此外,如果控件元素只对准一个单个元素——即data-target的值指向一个id选择器,你可以给这个控件元素添加额外的aria-controls属性,容纳这个折叠块元素的id。现代的屏幕阅读器以及类似的辅助技术利用这个属性向用户提供额外的快捷方式,直接导航到折叠块元素本身。
折叠插件使用一些Class类来处理复杂的事务:
这些类可以在_transitions.scss文件中查阅。
将data-toggle="collapse"和data-target添加到元素中,可自动指定折叠面板的控制项,其中data-target属性接受CSS选择器,以应用折叠。确保向可折叠面板添加collapse添加到可折叠面板组件之上。如果你希望它默认是打开的,可定义额外的show属性。
为了给一个折叠块控件添加类似手风琴组的效果,还需要添加data属性data-parent="#selector"。可以参考下面的演示了解实践例子。
人为启用它:
$('.collapse').collapse()选项可通过data属性或JavaScript传递选项。如用data属性,请把选项名追加到data-后面(如写为data-parent="")。
所有的API方法都是异步传输和轮换,一旦事件发生(开始),在结束之前,它们会持续返回给调用者。另外在过渡组件上的方法将被忽略。
启用你的可折叠对象,通过object方法。
$('#myCollapsible').collapse({toggle:false}).collapse('toggle')即发生shown.bs.collapse或hidden.bs.collapse事件前)返回给调用者。
显示可折叠元素,在可折叠元素实际显示之前(即shown.bs.collapse事件发生之前)返回给调用者。
隐藏可折叠元素,在可折叠元素实际上被隐藏之前(即hidden.bs.collapse事件发生之前)返回给调用者。