網頁開發 網頁設計

[教學] Bootstrap手風琴Accordion加入開合符號(純CSS版)

2018/02/13

梅問題-[教學]Bootstrap手風琴Accordion加入開合符號(純CSS版)

  Bootstrap除了網格系統方便外,再來就是內建了各式的網頁常用的特效,除了導覽列、輪播外,再來就是Accordion手風琴效果,而這個手風琴可應用的地方相當的廣,像是產品展示、訊息公告外,甚至還可將它用於選單,因此這看似簡單的功能,就看使用者怎運用,更重要的是這個手風琴效果,完全不用寫任何的Javascript以及CSS,透過HTML就可快速的完成這個效果,甚至還可透過這HTML中的標籤屬性來作設定,因此深受梅干的喜愛。


  但這麼好用的手風琴效果,有一個小小缺點就是,當今天將它展開時,卻沒有開合指示,因此這對於第一次使用的人,一時間則會有點搞不清楚,那一個是開,那一個關,但要在項目中,加入開合的指示符號,就知先知道,目前是那個項目開啟,才有辦法加入,因此這時就得透過javascript來進行偵測,但這對於javascript不熟的朋友,還真是一個苦差事,而現在有個更簡易的方法,直接透過CSS就可實現在手風琴效果中,加入開合的符號啦!且設定相當的簡單,有需要的朋友,現在也一塊來看看囉!


Step1
首先,先將Bootstrap的資源引用後,再把手風琴的HTML碼,放在body間。
[html]
<div class="panel-group" id="accordion">
<section class="panel panel-default">
<header class="panel-heading">
<h2 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#post1">
標題1
</a>
</h2>
</header>
<footer id="post1" class="panel-collapse collapse in">
<p class="panel-body">
內文
</p>
</footer>
</section>
<section class="panel panel-default">
<header class="panel-heading">
<h2 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#post2">
標題2
</a>
</h2>
</header>
<footer id="post2" class="panel-collapse collapse">
<p class="panel-body">
內文
</p>
</footer>
</section>
<section class="panel panel-default">
<header class="panel-heading">
<h2 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#post3">
標題3
</a>
</h2>
</header>
<footer id="post3" class="panel-collapse collapse">
<p class="panel-body">
內文
</footer>
</section>
</div>
[/html]
Step2
製作好後,再到瀏覽器中預覽時,就會看到一則一則的訊息。
梅問題-[教學]Bootstrap手風琴Accordion加入開合符號(純CSS版)
Step3
接著再加入CSS的樣式,而這邊梅干使用最簡單的+-符號,當然這也可以更改為ICON FONT。
[css]
.panel-heading .accordion-toggle:before /展開時/{
content: "-";
}
.panel-heading .accordion-toggle.collapsed:before /合起來/{
content: "+";
}
[/css]
Step4
當加入完畢後,剛的每一則訊息前方,就會出現+的符號,來提醒使用者這裡面還有東西,可以展開來預覽。

梅問題-[教學]Bootstrap手風琴Accordion加入開合符號(純CSS版)
Step5
這時點開時,前方的符號就會從原來的+變成-啦!是不是超EZ的呀!

梅問題-[教學]Bootstrap手風琴Accordion加入開合符號(純CSS版)
#範例展示(首則開啟):

#範例展示(全關):