<h3><i class="fa fa-chevron-right"></i> Fold 1</h3>
<div class="fold">
<div class="container">
This is fold 1
</div>
</div>
<h3><i class="fa fa-chevron-right"></i> Fold 2</h3>
<div class="fold">
<div class="container">
This is fold 2
</div>
</div>
每一個"摺"都是以<h3> + <div>來組成. 而第一個<div>裡面(紅字)基本上是可以寫入任何內容,文字,圖片,影片等.
在每一個<h3>的第一部分,我都加入了之前介紹過的Font Awesome小圖,讓整體看上來更為生動.
CSS部分:
h3 {
background-color: #f3f3f3;
padding: 10px;
cursor: pointer;
color: #525252;
margin-bottom: 0;
}
.fold {
display: none;
line-height: 17pt;
}
.container {
padding: 10px 10px 10px 30px;
border: solid #f3f3f3 2px;
}
通過CSS,我在<h3>上加入背景顏色,再把鼠標改成手指. 然後把fold這個class預設成隱藏,再用JQuery讓它做成點<h3>一下就會顯示,再點一下就隱藏. 最後是container這個class,加入跟<h3>背景顏色相同的外框就能把它做成摺疊的效果.
JQuery部分:
$(function(){
$('h3').click(function(){
if($(this).next('.fold').hasClass('o') == true){
$(this).find('i.fa').removeClass('fa-chevron-down').addClass('fa-chevron-right');
$(this).next('.fold').removeClass('o').slideUp();
}
else{
$(this).find('i.fa').removeClass('fa-chevron-right').addClass('fa-chevron-down');
$(this).next('.fold').addClass('o').slideDown();
}
});
});
這部分所有動作都是從<h3>被點下去開始, $('h3').click.
當<h3>被點時,首先就是要知道"摺"是在"打開"還是在"關閉"狀態,而且整個網頁上可能會有一個以上的"摺",所以我們要先找出被點下去的<h3>的下一個<div>是"打開"還是"關閉".
if($(this).next('.fold').hasClass('o') == true)
這句的$(this)就是指被點的元素,即<h3>,next('.fold')就是指下一個有fold這個class的元素.
hasClass('o')是指該元素有o這個class. 整句的意思就是當<h3>被點下去時,尋找下一個有fold這個class的元素(div),同時也有o這個class. 如果結果是true (有)的話,這代表這個"摺"是打開的狀態,因此就會執行以下動作:
$(this).find('i.fa').removeClass('fa-chevron-down').addClass('fa-chevron-right');
首先是尋找下一個有fa這個class的<i>元素,把"下箭頭"移除,再加入"右箭頭".
$(this).next('.fold').removeClass('o').slideUp();
接著是尋找下一個有fold的<div>元素,移除o這個class並往上摺 (這是"關閉"的動作).
然而,如果第一步的結果是false(否),即"摺"是在關閉狀態,所以就會執行以下動作去打開它.
$(this).find('i.fa').removeClass('fa-chevron-right').addClass('fa-chevron-down');
首先尋找下一個有fa這個class的<i>元素,把"右箭頭"移除並加入"下箭頭".
$(this).next('.fold').addClass('o').slideDown();
然後在下一個有fold這個class的<div>元素加入o這個class並往下開 (這是"打開"的動作).