創作內容

4 GP

[JQuery推廣] 用JQuery做出摺疊效果的內容

作者:law│2015-01-07 05:11:35│巴幣:8│人氣:1741
今天想分享一個簡單又實用的JQuery技巧 - 把內容做成摺疊效果. (其實我也不知道這是不是正確的說法 XD)

先來看一下實例:

接下來解釋一下HTML, CSS和JQuery的原始碼.

HTML部分:
<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並往下開 (這是"打開"的動作).
引用網址:https://home.gamer.com.tw/TrackBack.php?sn=2708173
All rights reserved. 版權所有,保留一切權利

相關創作

留言共 1 篇留言

魔法相消
摺疊效果 最主要是用在讓網頁更美觀嗎?
把一些圖文介紹先摺起來,使背景更整潔對吧@@!

好像很多圖文介紹網頁常用這種,似乎要保留背景網頁
的完整性。

01-10 14:29

law
摺疊效果通常是用於網頁有很多同類型的資料,例如問與答,把問題摺起,讓讀者自行點開看答案.

例子:http://lawlaw.net/loa/faq.html01-11 09:38
我要留言提醒:您尚未登入,請先登入再留言

4喜歡★lawlaw 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:Font Awesome...

追蹤私訊切換新版閱覽

作品資料夾

robert286 ლ(´•д• ̀ლ
ლ(´•д• ̀ლ看更多我要大聲說2小時前


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】