全面解析Bootstrap手風(fēng)琴效果
觸發(fā)手風(fēng)琴可以通過自定義的data-toggle 屬性來觸發(fā)。其中data-toggle值設(shè)置為 collapse,data-target="#折疊區(qū)標(biāo)識符"。
第一步,設(shè)計一個面板組合,里面有三個折疊區(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)容,每個面板包括兩個部分,第一個是面板標(biāo)題 panel-heading,并且在這里面添加標(biāo)題 panel-title。第二個部分是面板內(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ū)捆綁在一起,可以通過錨鏈接的方法,把標(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
每個面板的內(nèi)容區(qū)都被隱藏起來了,變成不可視,但有時候希望默認(rèn)第一個面板內(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)題鏈接中自定義兩個屬性,一個是data-toggle,并且取值為collapse;另一個是data-target,取值為各個面板內(nèi)容區(qū)的標(biāo)識符,比如說ID,在這個例子分別是#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>
注意:在這個案例中不加入data-target="#panel1"也可以,因?yàn)榍懊嬉呀?jīng)有了href="#panel1",但如是button按鈕作為觸發(fā)器就必須使用data-target="#panel1"語句了。
第六步,定義data-parent屬性,實(shí)現(xiàn)點(diǎn)擊一個其中一個元素時,關(guān)閉所有的折疊區(qū),再打開所單擊的區(qū)域(如果所單擊區(qū)域是展示的,則會關(guān)閉)。這個data-parent取值與手風(fēng)琴面板容器的標(biāo)識符相匹配,比如這個例子是指 #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)題一對應(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)題二對應(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)題三對應(yīng)的內(nèi)容</div> </div> </div> </div>
效果圖
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附兩個精彩的專題:Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程
以上就是對Bootstrap手風(fēng)琴效果的全面解析,希望對大家的學(xué)習(xí)有所幫助。
- Bootstrap 手風(fēng)琴菜單的實(shí)現(xiàn)代碼
- bootstrap手風(fēng)琴制作方法詳解
- 簡潔實(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文件方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09JavaScript九九乘法口訣表的簡單實(shí)現(xiàn)
這篇文章主要介紹了JavaScript乘法口訣表的簡單實(shí)現(xiàn),文中給出了詳細(xì)的示例代碼,這樣對大家的理解和學(xué)習(xí)更有幫助,有需要的朋友們可以參考借鑒,下面來一起看看吧。2016-10-10uniapp實(shí)現(xiàn)app自動更新詳細(xì)步驟
這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)app自動更新的詳細(xì)步驟,文中給出了詳細(xì)的代碼示例以及圖文教程,對大家學(xué)習(xí)或者使用uniapp具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-08-08小程序登錄/注冊頁面設(shè)計的實(shí)現(xiàn)代碼
這篇文章主要介紹了小程序登錄/注冊頁面設(shè)計的實(shí)現(xiàn)代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05js確認(rèn)刪除對話框適用于a標(biāo)簽及submit
這篇文章主要介紹的是一個js確認(rèn)刪除對話框適用于a標(biāo)簽及submit,非常好用,需要的朋友不要錯過2014-07-07學(xué)習(xí)javascript面向?qū)ο?掌握創(chuàng)建對象的9種方式
這篇文章主要為大家介紹了創(chuàng)建對象的9種方式,幫助大家更好地學(xué)習(xí)javascript面向?qū)ο?,感興趣的小伙伴們可以參考一下2016-01-01