Bootstrap创建可折叠的组件
本文将学习如何通过Bootstrap创建可折叠的组件，具体内容如下
什么是必需的
您必须引用jquery.js和bootstrap-collapse.js-这两个JavaScript文件都位于docs/assets/js文件夹内。
您可以在不编写大量JavaScript或者不调用JavaScript的情况下创建可折叠的组件。
实例
第一个实例演示如何不调用JavaScript创建可折叠的组件。
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"/> <title>collapsibleexample</title> <linkhref="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css"rel="stylesheet"type="text/css"/> </head> <body> <divclass="container-fluid"> <divclass="accordion"id="accordion2"> <divclass="accordion-group"> <divclass="accordion-heading"> <aclass="accordion-toggle"data-toggle="collapse"data-parent="#accordion2"href="#collapseOne"> Clickmetoexapand.Clickmeagaintocollapse.PartI. </a> </div> <divid="collapseOne"class="accordion-bodycollapse"style="height:0px;"> <divclass="accordion-inner"> Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum. </div> </div> </div> <divclass="accordion-group"> <divclass="accordion-heading"> <aclass="accordion-toggle"data-toggle="collapse"data-parent="#accordion2"href="#collapseTwo"> Clickmetoexapand.Clickmeagaintocollapse.PartII. </a> </div> <divid="collapseTwo"class="accordion-bodycollapse"> <divclass="accordion-inner"> Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum. </div> </div> </div> <divclass="accordion-group"> <divclass="accordion-heading"> <aclass="accordion-toggle"data-toggle="collapse"data-parent="#accordion2"href="#collapseThree"> Clickmetoexapand.Clickmeagaintocollapse.PartIII. </a> </div> <divid="collapseThree"class="accordion-bodycollapse"> <divclass="accordion-inner"> Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum. </div> </div> </div> </div> </div> <scripttype="text/javascript"src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script> <scripttype="text/javascript"src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script> </body> </html>
解释
这里有三点需要注意。第一，添加data-toggle="collapse"到您要点击的链接上，用来展开或折叠组件。
第二，添加一个href或一个data-target属性到父组件，它的值为子组件的id。
第三，添加一个data-parent属性用来创建手风琴式的效果。data-parent属性的值与主容器div（保存整个手风琴组件）的id属性的值相同。如果您想要创建一个简单的折叠组件，不需要像手风琴那么复杂，就不需要添加这个属性。
实例
第二个实例演示如何创建简单的可折叠组件。
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"/> <title>collapsibleviaJavaScriptexample</title> <linkhref="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css"rel="stylesheet"type="text/css"/> </head> <body> <divid="myCollapsibleExample"><ahref="#demo"data-toggle="collapse">Clickmetoexpandandclickmeagaintocollapse.</a></div> <divid="demo"class="collapse"> Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehe. </div> <scripttype="text/javascript"src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script> <scripttype="text/javascript"src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script> </body> </html>
通过JavaScript调用
您可以使用下面的代码来通过JavaScript触发折叠。
$(".collapse").collapse()
选项、方法和事件
这里有一些通过BootstrapCollapsibleJavaScript插件使用的选项、方法、事件。具体如下所示：
选项
parent:值的类型为Selector。默认值为false。当父元素显示时，父元素下所有的可折叠元素是关闭的。
toggle:值的类型为Boolean。默认值为true。当被调用时，切换所有的可折叠元素。
toggle:值的类型为Boolean。默认值为true。当被调用时，切换所有的可折叠元素。
方法
.collapse(options):触发可折叠内容。接受一个可选的option对象。
.collapse('toggle'):展示或隐藏一个可折叠的页面元素。
.collapse('show'):展示一个可折叠的页面元素。
.collapse(hide):隐藏一个可折叠的页面元素。
事件
show:当show实例方法被调用之后，此事件被立即触发。
shown:当可折叠页面元素显示出来之后（同时CSS过渡效果也已执行完毕），此事件被触发。
hide:当hide实例方法被调用之后，此事件被立即触发。
hidden:当可折叠页面元素向用户隐藏之后（同时CSS过渡效果也已执行完毕），此事件被触发。
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程Bootstrap实战教程
以上就是本文的全部内容，希望对大家的学习有所帮助。