[小工具] jQuery 展開收合效果安裝懶人包

「展開收合效果」是常見的網頁技巧，最早是在 +Mark X 的「留言版提示 - jQuery 展開收合效果」看到這個效果。

如果一個頁面只有一處需要用這個效果，那麼請直接參考 mark 這篇文章即可；如果同一網頁有多處需要展開收合時，這個功能在使用上會稍微麻煩一些，需要每一處個別設定 id、個別執行不同的 js 程式碼，對於不熟悉程式碼的讀者，可能會不知如何下手。

因此有這樣的需求時，可使用本文提供的懶人包，就能批次搞定多處的程式碼。第一次需要花點心思設計樣式，不過以後套用就非常方便。

<< 請注意！本篇文章含會員限定內容 >>

一、各種註腳的展現方式

首先介紹一下「展開收合效果」在部落格可運用於何種情境。

對於網站的熟客而言，可能比較有耐心閱讀站長的一字一句，文章內容過長不太會是問題；不過對於新訪客而言，主要目的可能是在網路上尋找資料，希望直接看到重點，廢話越少越好。對於這兩種極端類型的讀者，身為站長的你，會想選邊站呢？還是想兩種都討好呢？

討好所有人很困難、也不一定需要，但這件事的確有兩全其美的方法，就是在文章中使用「註腳」功能。重點的部份提供給沒時間的訪客閱讀，同時頁面也可比較簡潔；而進一步需要補充的部份，使用各種註腳的技巧，讓有時間想要深入了解的讀者點擊按鈕，才顯示隱藏內容。剛好目前就是一個絕佳的舉例──

下面內容是針對只想看重點的讀者，在文章中使用「註腳」大致有三種形式：

• Footnote 註腳功能外掛
• Fancybox 燈箱效果
• jQuery 展開收合效果

想了解細節請點下面這個按鈕展開隱藏內容：

三種註腳型態詳細說明

二、準備動作

以下說明如何簡單安裝 jQuery 展開收合效果，第一部份是 jQuery 主程式碼及 CSS 樣式設計。

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

請到後台「範本」→「編輯 HTML」，搜尋 </head> 這個字串，找到後在此字串的前一行，插入以下程式碼：

<style>
/* 展開收合效果 */
.slide_toggle {
text-align: center;
cursor: pointer;
font-weight: bold;
/* 收合提示字串區塊, 還可加入自訂 CSS 效果 */
line-height: 170%;
background-color: #eed;
border-radius: 7px;
}
.slide_toggle + div {
display: none;
margin-top: 10px;
/* 隱藏註解文字區塊, 請加入自訂 CSS 效果 */
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>

1. .slide_toggle {...} 的區間為收合提示字串的按鈕區塊，可使用這些預設的 CSS 語法，或是自訂 CSS 樣式。
2. .slide_toggle + div {...} 的區間為事先隱藏起來的註解文字區塊，這個區塊比較大，每個人喜好設計的樣式都不同，建議可參考「讓網頁使用各種特殊文字區塊」系列文，來加入自己的 CSS 樣式。
3. 最後一行的藍色字串，請先檢查一下範本是否已經安裝過 jQuery，如果有的話，就不必重複安裝這一行。

三、擺放位置

如果要放在文章之中的話，請在文章中任何想要擺放提示文字按鈕、及隱藏註解的位置，安插以下 HTML：

<div class="slide_toggle">填入收合提示文字</div>
<div>填入隱藏的說明內容</div>

1. 按照紅色字串的說明來置換自己的內容即可。
2. 舉例來說，一篇文章有五個地方要放註腳，就擺放五組這樣的 HTML 內容。
3. 如果「收合提示文字」想要放在行內(不要使用一整行的區塊)，那麼第一行可改成 <span class="slide_toggle">填入收合提示文字</span>，不過 CSS 也要調整就是了。
4. 如果按鈕跟隱藏區塊不想連在一起，想隔一段距離(中間穿插其他文字)，也是沒問題，但兩行程式碼之間只能有文字，不可有其他 HTML 標籤，否則程式碼就失效了。

四、執行程式碼

最後，要將執行程式碼放在哪裡，端看這個功能的使用頻率。以下是執行的 js 程式碼：

1. 如果常常使用這個功能的話，比較方便的作法，是將以上程式碼放在範本中 </body> 的前一行。
2. 如果不常使用的話，那麼放在文章之中就行了，不過每篇要使用此功能的文章，都必須放這段程式碼。請放在文章的最底部。
3. 如果不喜歡「滑進滑出」這樣的效果，那麼 "slideToggle" 這個字串可改成 "fadeToggle"，會變成「淡入淡出」的效果。

想要看一篇文章之中，有多處開合效果，請見以下範例網頁：

點此看範例網頁

五、常見 FAQ

日後若有常見問題，會持續補充在此。

Q1: +Lee Bruce 來信詢問，「展開收合按鈕」能否放在隱藏內容的後面，這樣收合的時候按按鈕比較方便？

Ans: 請依以下步驟修改：

1. 「二、準備動作」→ </head> 之前的字串 ".slide_toggle + div" 請改為 ".slide_hide"
2. 「三、擺放位置」→ 這兩行程式碼的位置請互換 → 字串 "<div>填入隱藏的說明內容</div>" 請改為 "<div class="slide_hide">填入隱藏的說明內容</div>"
3. 「四、執行程式碼」→ 字串 "$(this).next().slideToggle();" 請改為 "$(this).prev().slideToggle();"

jQuery 相關網頁效果：