全面解析Bootstrap手風(fēng)琴效果
觸發(fā)手風(fēng)琴可以通過(guò)自定義的data-toggle 屬性來(lái)觸發(fā)。其中data-toggle值設(shè)置為 collapse,data-target="#折疊區(qū)標(biāo)識(shí)符"。
第一步,設(shè)計(jì)一個(gè)面板組合,里面有三個(gè)折疊區(qū):
<div class="panel-group" id="myAccordion"> <div class="panel panel-accordion panel-default"></div> <div class="panel panel-accordion panel-default"></div> <div class="panel panel-accordion panel-default"></div> </div>
第二步:給面板添加內(nèi)容,每個(gè)面板包括兩個(gè)部分,第一個(gè)是面板標(biāo)題 panel-heading,并且在這里面添加標(biāo)題 panel-title。第二個(gè)部分是面板內(nèi)容,也就是折疊區(qū),使用 panel-collapse 樣式。
<div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title">標(biāo)題一</h4> </div> <div class="panel-collapse"> <div class="panel-body">折疊區(qū)內(nèi)容...</div> </div> </div>
第三步,為了把標(biāo)題和內(nèi)容區(qū)捆綁在一起,可以通過(guò)錨鏈接的方法,把標(biāo)題區(qū)域和面板區(qū)連在一起:
<div class="panel-group" id="myAccordion"> <div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a href="#panel1">標(biāo)題一</a></h4> </div> <div class="panel-collapse" id="panel1"> <div class="panel-body">折疊區(qū)內(nèi)容...</div> </div> </div> <div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a href="#panel2">標(biāo)題二</a></h4> </div> <div class="panel-collapse" id="panel2"> <div class="panel-body">折疊區(qū)內(nèi)容...</div> </div> </div> ...... </div>
第四步,控制面板內(nèi)容區(qū)是否可視。在Bootstrap框架中,如果你想讓內(nèi)容區(qū)域不可視,只需要在 panel-collapse 樣式上添加 collapse
每個(gè)面板的內(nèi)容區(qū)都被隱藏起來(lái)了,變成不可視,但有時(shí)候希望默認(rèn)第一個(gè)面板內(nèi)容是可視的,需要怎么辦?其實(shí)Bootstrap作者早就為大家做了這方面的考慮,你只需要在collapse基礎(chǔ)上再追加 in 樣式.
<div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a href="#panel1">標(biāo)題一</a></h4> </div> <div class="panel-collapse collapse" id="panel1"> <div class="panel-body">折疊區(qū)內(nèi)容...</div> </div> </div>
第五步,激活手風(fēng)琴交互行為。要完成交互行為,需要在標(biāo)題鏈接中自定義兩個(gè)屬性,一個(gè)是data-toggle,并且取值為collapse;另一個(gè)是data-target,取值為各個(gè)面板內(nèi)容區(qū)的標(biāo)識(shí)符,比如說(shuō)ID,在這個(gè)例子分別是#panel1、#panel2和#panel3
div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a href="#panel1" data-toggle="collapse" data-target="#panel1">標(biāo)題一</a></h4> </div> <div class="panel-collapse collapse in" id="panel1"> <div class="panel-body">折疊區(qū)內(nèi)容...</div> </div> </div>
注意:在這個(gè)案例中不加入data-target="#panel1"也可以,因?yàn)榍懊嬉呀?jīng)有了href="#panel1",但如是button按鈕作為觸發(fā)器就必須使用data-target="#panel1"語(yǔ)句了。
第六步,定義data-parent屬性,實(shí)現(xiàn)點(diǎn)擊一個(gè)其中一個(gè)元素時(shí),關(guān)閉所有的折疊區(qū),再打開(kāi)所單擊的區(qū)域(如果所單擊區(qū)域是展示的,則會(huì)關(guān)閉)。這個(gè)data-parent取值與手風(fēng)琴面板容器的標(biāo)識(shí)符相匹配,比如這個(gè)例子是指 #myAccordion:
<div class="panel-group" id="myAccordion"> <div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#panel1" data-toggle="collapse" data-target="#panel1" data-parent="#myAccordion">標(biāo)題一</a> </h4> </div> ... 七
七. 完整代碼
<div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">標(biāo)題一</a></h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body">標(biāo)題一對(duì)應(yīng)的內(nèi)容</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">標(biāo)題二</a></h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body">標(biāo)題二對(duì)應(yīng)的內(nèi)容</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse"data-parent="#accordion"href="#collapseThree">標(biāo)題三</a></h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body">標(biāo)題三對(duì)應(yīng)的內(nèi)容</div> </div> </div> </div>
效果圖
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附兩個(gè)精彩的專題:Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程
以上就是對(duì)Bootstrap手風(fēng)琴效果的全面解析,希望對(duì)大家的學(xué)習(xí)有所幫助。
- Bootstrap 手風(fēng)琴菜單的實(shí)現(xiàn)代碼
- bootstrap手風(fēng)琴制作方法詳解
- 簡(jiǎn)潔實(shí)用的BootStrap jQuery手風(fēng)琴插件
- Angular.js與Bootstrap相結(jié)合實(shí)現(xiàn)手風(fēng)琴菜單代碼
- bootstrap折疊調(diào)用collapse()后data-parent不生效的快速解決辦法
- Bootstrap基本插件學(xué)習(xí)筆記之折疊(22)
- Bootstrap每天必學(xué)之折疊(Collapse)插件
- Bootstrap每天必學(xué)之折疊
- Bootstrap創(chuàng)建可折疊的組件
- bootstrap手風(fēng)琴折疊示例代碼分享
相關(guān)文章
javascript實(shí)現(xiàn)生成并下載txt文件方式
這篇文章主要介紹了javascript實(shí)現(xiàn)生成并下載txt文件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09JavaScript函數(shù)this指向問(wèn)題詳解
這篇文章主要為大家介紹了JavaScript函數(shù)this指向,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2021-11-11JavaScript九九乘法口訣表的簡(jiǎn)單實(shí)現(xiàn)
這篇文章主要介紹了JavaScript乘法口訣表的簡(jiǎn)單實(shí)現(xiàn),文中給出了詳細(xì)的示例代碼,這樣對(duì)大家的理解和學(xué)習(xí)更有幫助,有需要的朋友們可以參考借鑒,下面來(lái)一起看看吧。2016-10-10uniapp實(shí)現(xiàn)app自動(dòng)更新詳細(xì)步驟
這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)app自動(dòng)更新的詳細(xì)步驟,文中給出了詳細(xì)的代碼示例以及圖文教程,對(duì)大家學(xué)習(xí)或者使用uniapp具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-08-08小程序登錄/注冊(cè)頁(yè)面設(shè)計(jì)的實(shí)現(xiàn)代碼
這篇文章主要介紹了小程序登錄/注冊(cè)頁(yè)面設(shè)計(jì)的實(shí)現(xiàn)代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05js確認(rèn)刪除對(duì)話框適用于a標(biāo)簽及submit
這篇文章主要介紹的是一個(gè)js確認(rèn)刪除對(duì)話框適用于a標(biāo)簽及submit,非常好用,需要的朋友不要錯(cuò)過(guò)2014-07-07學(xué)習(xí)javascript面向?qū)ο?掌握創(chuàng)建對(duì)象的9種方式
這篇文章主要為大家介紹了創(chuàng)建對(duì)象的9種方式,幫助大家更好地學(xué)習(xí)javascript面向?qū)ο?,感興趣的小伙伴們可以參考一下2016-01-01