如果一個頁面只有一處需要用這個效果,那麼請直接參考 mark 這篇文章即可;如果同一網頁有多處需要展開收合時,這個功能在使用上會稍微麻煩一些,需要每一處個別設定 id、個別執行不同的 js 程式碼,對於不熟悉程式碼的讀者,可能會不知如何下手。
因此有這樣的需求時,可使用本文提供的懶人包,就能批次搞定多處的程式碼。第一次需要花點心思設計樣式,不過以後套用就非常方便。
<< 請注意!本篇文章含會員限定內容 >>
一、各種註腳的展現方式
首先介紹一下「展開收合效果」在部落格可運用於何種情境。
對於網站的熟客而言,可能比較有耐心閱讀站長的一字一句,文章內容過長不太會是問題;不過對於新訪客而言,主要目的可能是在網路上尋找資料,希望直接看到重點,廢話越少越好。對於這兩種極端類型的讀者,身為站長的你,會想選邊站呢?還是想兩種都討好呢?
討好所有人很困難、也不一定需要,但這件事的確有兩全其美的方法,就是在文章中使用「註腳」功能。重點的部份提供給沒時間的訪客閱讀,同時頁面也可比較簡潔;而進一步需要補充的部份,使用各種註腳的技巧,讓有時間想要深入了解的讀者點擊按鈕,才顯示隱藏內容。剛好目前就是一個絕佳的舉例──
下面內容是針對只想看重點的讀者,在文章中使用「註腳」大致有三種形式:
- Footnote 註腳功能外掛
- Fancybox 燈箱效果
- jQuery 展開收合效果
想了解細節請點下面這個按鈕展開隱藏內容:
二、準備動作
以下說明如何簡單安裝 jQuery 展開收合效果,第一部份是 jQuery 主程式碼及 CSS 樣式設計。
在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。
請到後台「範本」→「編輯 HTML」,搜尋
<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>
.slide_toggle {...} 的區間為收合提示字串的按鈕區塊,可使用這些預設的 CSS 語法,或是自訂 CSS 樣式。.slide_toggle + div {...} 的區間為事先隱藏起來的註解文字區塊,這個區塊比較大,每個人喜好設計的樣式都不同,建議可參考「讓網頁使用各種特殊文字區塊」系列文,來加入自己的 CSS 樣式。- 最後一行的藍色字串,請先檢查一下範本是否已經安裝過 jQuery,如果有的話,就不必重複安裝這一行。
三、擺放位置
如果要放在文章之中的話,請在文章中任何想要擺放提示文字按鈕、及隱藏註解的位置,安插以下 HTML:
<div class="slide_toggle">填入收合提示文字</div>
<div>填入隱藏的說明內容</div>
- 按照紅色字串的說明來置換自己的內容即可。
- 舉例來說,一篇文章有五個地方要放註腳,就擺放五組這樣的 HTML 內容。
- 如果「收合提示文字」想要放在行內(不要使用一整行的區塊),那麼第一行可改成 <span class="slide_toggle">填入收合提示文字</span>,不過 CSS 也要調整就是了。
- 如果按鈕跟隱藏區塊不想連在一起,想隔一段距離(中間穿插其他文字),也是沒問題,但兩行程式碼之間只能有文字,不可有其他 HTML 標籤,否則程式碼就失效了。
四、執行程式碼
最後,要將執行程式碼放在哪裡,端看這個功能的使用頻率。以下是執行的 js 程式碼:
- 如果常常使用這個功能的話,比較方便的作法,是將以上程式碼放在範本中
</body> 的前一行。 - 如果不常使用的話,那麼放在文章之中就行了,不過每篇要使用此功能的文章,都必須放這段程式碼。請放在文章的最底部。
- 如果不喜歡「滑進滑出」這樣的效果,那麼 "slideToggle" 這個字串可改成 "fadeToggle",會變成「淡入淡出」的效果。
想要看一篇文章之中,有多處開合效果,請見以下範例網頁:
五、常見 FAQ
日後若有常見問題,會持續補充在此。
Q1: +Lee Bruce 來信詢問,「展開收合按鈕」能否放在隱藏內容的後面,這樣收合的時候按按鈕比較方便?
Ans: 請依以下步驟修改:
- 「二、準備動作」→
</head> 之前的字串 ".slide_toggle + div" 請改為 ".slide_hide" - 「三、擺放位置」→ 這兩行程式碼的位置請互換 → 字串 "<div>填入隱藏的說明內容</div>" 請改為 "<div class="slide_hide">填入隱藏的說明內容</div>"
- 「四、執行程式碼」→ 字串 "$(this).next().slideToggle();" 請改為 "$(this).prev().slideToggle();"
jQuery 相關網頁效果:
這個功能太實用了!謝謝分享!
回覆刪除好功能
回覆刪除這個程式碼是比較簡潔的,先前也曾考慮過這個寫法,不過在不同層的 DOM 或同時要展開 div 容器比對時的邏輯錯誤等問題,所以我還是採用宣告變數的笨方式,因為抓錯誤真的常因為這種小地方而需要整個程式碼一條一條看。不過對於不會將程式碼再利用的網友,懶人包還是簡潔點的好。
回覆刪除請問關於「三、擺放位置」
回覆刪除有沒有辦法新增一行指令可以調整「預設為開啟或收合狀態」呢?
因為我有2、3個頁面打算放置收合效果
但有些希望預設展開,有些希望預設收合
有試過簡單修改語法
---
.slide_toggle + div {
display: true;
----
但這樣就變成全部展開了… :-(
<7480283566998501443>(以上內容請勿刪除,以下引言請自行刪減) [quote]不想隱藏的div,直接在行內style設定為顯示就行了。BTW,display的參數沒有true喔,可以google一下(可設為block)[/quote]
回覆刪除哈哈真不好意思!略看得懂些程式碼,但不會寫
請問提到的style是指在div那邊要怎麼寫…?
原本自己亂改改成true,blogger上都自動展開了,也就沒去深入了解了...
後來有去查了一下參數,在文章內亂下語法測試了下還是沒有效果...
<6751808971913970488>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除我的意思是
div class="slide_toggle"填入收合提示文字/div
div填入隱藏的說明內容/div
要怎麼補上style讓他能預設展開~~(假設自訂html語法那邊的display:none;)
(怕消失,我把大小於都拿掉了)
我用的模板是blogger內建然後都照著您的教學做的,所以語法完全跟文章上的一樣~~
謝謝您提供網頁!我會在研究看看寫法!
<2775390119999930090>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除原來是加在那個地方!
之前一直在div class="slide_toggle"標題這邊調整
難怪一直怪怪的!
瞬間豁然開朗!
原來是自己白痴沒搞清楚…
非常感謝!
作者已經移除這則留言。
回覆刪除收合提示文字的展開工具背景太長,如何做的跟此網頁一樣
回覆刪除http://fkxs.blogspot.tw/p/blog-page_93.html
回覆刪除麻煩了~
在這裡發問?站長都回回覆嗎?
回覆刪除或是作者(版主)會回覆嗎?
會員“需要再加值嗎?
希望有人告知! 因為我剛認識這個網站。
祝大家 福安!
請問,我按照上面的步驟,建立一個HTML檔後,
回覆刪除一開啟是完全閉合的
轉成PHP檔後,全部都展開的,有方法可解決嗎?
目前需要一開啟都是閉合的,謝謝