利用Bootstrap實現手風琴效果
前面的話
Bootstrap 框架中 Collapse插件(折疊)其實就是我們常見的手風琴效果。當單擊一個觸發元素時,在另一個可折疊區域進行顯示或隱藏,再次單擊時可以反轉顯示狀態。經典的場景是多個折疊區域的手風琴風格以及單一title/content的風格,本文將詳細介紹Bootstrap手風琴效果
結構
手風琴最關鍵的部分,就是每個標題對應有一個內容,在Bootstrap框架中將這兩個部分組合起來稱為一個panel面板,如下邊效果所示,有三個panel面板,將這三個面板組合在一起,就是一個面板組合 panel-group,也就是手風琴的結構

簡單點就是一個觸發器和一個折疊區
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">触发器</button><div id="demo" class="collapse in">折叠区</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">标题一</a></h4></div><div id="collapseOne" class="panel-collapse collapse in"><div class="panel-body">标题一对应的内容</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">标题二</a></h4></div><div id="collapseTwo" class="panel-collapse collapse"><div class="panel-body">标题二对应的内容</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">标题三</a></h4></div><div id="collapseThree" class="panel-collapse collapse"><div class="panel-body">标题三对应的内容</div></div></div></div>
聲明式觸發
觸發手風琴可以透過自訂的 data-toggle 屬性來觸發。其中data-toggle值設定為 collapse,data-target="#折疊區標識符"。接下來我們來看一個簡單的範例
第一步:設計一個面板組合,裡面有三個折疊區
<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>
第二步:為面板新增內容,每個面板包括兩個部分,第一個是面板標題 panel-heading,並且在這裡面添加標題 panel-title。第二部分是面板內容,也就是折疊區,使用 panel-collapse 樣式
<div class="panel panel-accordion panel-default"><div class="panel-heading"><h4 class="panel-title">标题一</h4></div><div class="panel-collapse"><div class="panel-body">折叠区内容...</div></div></div>
第三步:為了把標題和內容區捆綁在一起,可以透過錨連結的方法,把標題區域和麵板區連在一起
<div class="panel-group" id="myAccordion"><div class="panel panel-accordion panel-default"><div class="panel-heading"><h4 class="panel-title"><a href="#panel1">标题一</a></h4></div><div class="panel-collapse" id="panel1"><div class="panel-body">折叠区内容...</div></div></div><div class="panel panel-accordion panel-default"><div class="panel-heading"><h4 class="panel-title"><a href="#panel2">标题二</a></h4></div><div class="panel-collapse" id="panel2"><div class="panel-body">折叠区内容...</div></div></div>......</div>
第四步:控制面板內容區是否可視。在Bootstrap框架中,如果想要讓內容區域不可見,只需要在panel-collapse 樣式上加入 collapse;如果想要讓內容區域預設可見,則需要新增樣式collapse和in
<div class="panel panel-accordion panel-default"><div class="panel-heading"><h4 class="panel-title"><a href="#panel1">标题一</a></h4></div><div class="panel-collapse collapse" id="panel1"><div class="panel-body">折叠区内容...</div></div></div>
第五步:啟動手風琴互動行為。要完成互動行為,需要在標題連結中自訂兩個屬性,一個是data-toggle,並且取值為collapse;另一個是data-target,取值為各個面板內容區的標識符,比如說ID,在這個例子分別是#panel1、#panel2和#panel3:
[注意]在這個案例中不加入data-target="#panel1"
也可以,因為前面已經有了href="#panel1"
,但如裡是button按鈕當觸發器就必須使用data-target="#panel1"
語句
<div class="panel panel-accordion panel-default"><div class="panel-heading"><h4 class="panel-title"><a href="#panel1" data-toggle="collapse" data-target="#panel1">标题一</a></h4></div><div class="panel-collapse collapse in" id="panel1"><div class="panel-body">折叠区内容...</div></div></div>
第六步:定義data-parent屬性,實作點擊其中一個元素時,關閉所有的折疊區,再開啟所點擊的區域(如果所點擊區域是展示的,則會關閉)。這個data-parent取值與手風琴面板容器的標識符相匹配,例如這個例子是指 #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">标题一</a></h4></div>…
通過以上6步,可以總結出以下要點
☑ 使用panel 的panel-title 作為觸發元素,使用panel-body的父元素作為折疊區;
☑ 使用一個panel-group 來包含多個panel,從而實現手風琴效果;
# ☑ 每個panel 裡的觸發元素都要指定data-parent屬性,data-parent 屬性的值對應panel-group樣式元素的ID或其他樣式標識符;
☑ 觸發元素需要指定data-toggle,且值為collapse;
☑ 觸發元素需要指定data-target屬性, data-target屬性的值對應panel-body 的父元素的ID或其他樣式標識符;如果是a元素標識符;如果是a元素標識符;如果是a元素標識符;如果是a元素標識符;如果是a元素標識符;如果是a元素識別碼,可以指定href屬性替代
<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="#panel1">标题一</a></h4></div><div id="panel1" class="panel-collapse collapse in"><div class="panel-body">折叠区内容一</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#panel2">标题二</a></h4></div><div id="panel2" class="panel-collapse collapse"><div class="panel-body">折叠区内容二</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#panel3">标题三</a></h4></div><div id="panel3" class="panel-collapse collapse"><div class="panel-body">折叠区内容三</div></div></div></div>
#
JS觸發
#【關鍵字】
<span style="color: #000000;">$(element).collapse('show');//显示折叠区域 $(element).collapse('hide');//隐藏折叠区域 $(element).collapse('toggle');//反转折叠区域<br></span>
<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="#panel1">标题一</a></h4></div><div id="panel1" class="panel-collapse collapse in"><div class="panel-body">折叠区内容一</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#panel2">标题二</a></h4></div><div id="panel2" class="panel-collapse collapse"><div class="panel-body">折叠区内容二</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#panel3">标题三</a></h4></div><div id="panel3" class="panel-collapse collapse"><div class="panel-body">折叠区内容三</div></div></div></div><script>$(function(){ $('#btn1').click(function(){ $('.collapse').collapse('show'); }) $('#btn2').click(function(){ $('.collapse').collapse('hide'); }) $('#btn3').click(function(){ $('.collapse').collapse('toggle'); }) })</script>
【事件】
該插件支援4種類型的事件訂閱
show.bs.collapse show方法调用之后立即触发该事件 shown.bs.collapse 此事件在collapse已经显示出来(并且同时在 CSS 过渡效果完成)之后被触发 hide.bs.collapse hide方法调用之后立即触发该事件。 hidden.bs.collapse 此事件在collapse被隐藏(并且同时在 CSS 过渡效果完成)之后被触发
<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" data-html="标题一" href="#panel1">标题一</a></h4></div><div id="panel1" class="panel-collapse collapse in"><div class="panel-body">折叠区内容一</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" data-html="标题二" href="#panel2">标题二</a></h4></div><div id="panel2" class="panel-collapse collapse"><div class="panel-body">折叠区内容二</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" data-html="标题三" href="#panel3">标题三</a></h4></div><div id="panel3" class="panel-collapse collapse"><div class="panel-body">折叠区内容三</div></div></div></div><script>$(function(){ $("#accordion").on("show.bs.collapse",function(e){var $element = $(e.target).siblings().first().find('a'); $element.html($element.data('html') + '[折叠区已打开]'); }).on("hide.bs.collapse",function(e){var $element = $(e.target).siblings().first().find('a'); $element.html($element.data('html') + '[折叠区已关闭]'); }) }); </script>
#
#
以上是利用Bootstrap實現手風琴效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

如何使用 Bootstrap 獲取搜索欄的值:確定搜索欄的 ID 或名稱。使用 JavaScript 獲取 DOM 元素。獲取元素的值。執行所需的操作。

在 Vue.js 中使用 Bootstrap 分為五個步驟:安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選:自定義樣式。可選:使用插件。

使用 Bootstrap 實現垂直居中:flexbox 法:使用 d-flex、justify-content-center 和 align-items-center 類,將元素置於 flexbox 容器內。 align-items-center 類法:對於不支持 flexbox 的瀏覽器,使用 align-items-center 類,前提是父元素具有已定義的高度。

創建 Bootstrap 分割線有兩種方法:使用 標籤,可創建水平分割線。使用 CSS border 屬性,可創建自定義樣式的分割線。

在 Bootstrap 中插入圖片有以下幾種方法:直接插入圖片,使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件,可以提供響應式圖片和更多樣式。設置圖片大小,使用 img-fluid 類可以使圖片自適應。設置邊框,使用 img-bordered 類。設置圓角,使用 img-rounded 類。設置陰影,使用 shadow 類。調整圖片大小和位置,使用 CSS 樣式。使用背景圖片,使用 background-image CSS 屬性。

要設置 Bootstrap 框架,需要按照以下步驟:1. 通過 CDN 引用 Bootstrap 文件;2. 下載文件並將其託管在自己的服務器上;3. 在 HTML 中包含 Bootstrap 文件;4. 根據需要編譯 Sass/Less;5. 導入定製文件(可選)。設置完成後,即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

要調整 Bootstrap 中元素大小,可以使用尺寸類,具體包括:調整寬度:.col-、.w-、.mw-調整高度:.h-、.min-h-、.max-h-

如何使用 Bootstrap 按鈕?引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本
