2014年9月7日

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

A+
「展開收合效果」是常見的網頁技巧,最早是在 +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 相關網頁效果:

19 則留言:

  1. 這個功能太實用了!謝謝分享!

    回覆刪除
  2. 這個程式碼是比較簡潔的,先前也曾考慮過這個寫法,不過在不同層的 DOM 或同時要展開 div 容器比對時的邏輯錯誤等問題,所以我還是採用宣告變數的笨方式,因為抓錯誤真的常因為這種小地方而需要整個程式碼一條一條看。不過對於不會將程式碼再利用的網友,懶人包還是簡潔點的好。

    回覆刪除
  3. <4577307404792438949>(以上內容請勿刪除,從括號之後開始留言)這篇的寫法也不是萬用包,某些情況下還是得用 mark 的語法,如果懂 js,那麼就能因時制宜選擇適合的方案了~ :)

    回覆刪除
  4. 請問關於「三、擺放位置」
    有沒有辦法新增一行指令可以調整「預設為開啟或收合狀態」呢?

    因為我有2、3個頁面打算放置收合效果
    但有些希望預設展開,有些希望預設收合

    有試過簡單修改語法
    ---
    .slide_toggle + div {
    display: true;
    ----
    但這樣就變成全部展開了… :-(

    回覆刪除
  5. <5781696489632518903>(以上內容請勿刪除,從括號之後開始留言)不想隱藏的 div, 直接在行內 style 設定為顯示就行了。BTW,display 的參數沒有 true 喔,可以 google 一下 (可設為 block)

    回覆刪除
  6. <7480283566998501443>(以上內容請勿刪除,以下引言請自行刪減) [quote]不想隱藏的div,直接在行內style設定為顯示就行了。BTW,display的參數沒有true喔,可以google一下(可設為block)[/quote]
    哈哈真不好意思!略看得懂些程式碼,但不會寫
    請問提到的style是指在div那邊要怎麼寫…?

    原本自己亂改改成true,blogger上都自動展開了,也就沒去深入了解了...
    後來有去查了一下參數,在文章內亂下語法測試了下還是沒有效果...

    回覆刪除
  7. <3086405615378224294>(以上內容請勿刪除,從括號之後開始留言)[quote]style是指在div那邊要怎麼寫…[/quote]
    前面已經提供了關鍵字 "style 行內",可以 google 一下。想要學習網頁語法,建議可以從 HTML/CSS 的教學開始,例如 http://zh-tw.learnlayout.com/

    另外,你說"在文章內亂下語法測試了下還是沒有效果...",這樣的描述幫不上你喔~

    如果寫出你的語法,至少還能幫你看出錯誤在哪裡,例如前面的 display:true

    回覆刪除
  8. <6751808971913970488>(以上內容請勿刪除,從括號之後開始留言)

    我的意思是
    div class="slide_toggle"填入收合提示文字/div
    div填入隱藏的說明內容/div
    要怎麼補上style讓他能預設展開~~(假設自訂html語法那邊的display:none;)
    (怕消失,我把大小於都拿掉了)

    我用的模板是blogger內建然後都照著您的教學做的,所以語法完全跟文章上的一樣~~


    謝謝您提供網頁!我會在研究看看寫法!

    回覆刪除
  9. <6222234886872783630>(以上內容請勿刪除,從括號之後開始留言)<div style="display: block;">填入隱藏的說明內容</div>

    回覆刪除
  10. <2775390119999930090>(以上內容請勿刪除,從括號之後開始留言)
    原來是加在那個地方!
    之前一直在div class="slide_toggle"標題這邊調整
    難怪一直怪怪的!
    瞬間豁然開朗!

    原來是自己白痴沒搞清楚…

    非常感謝!

    回覆刪除
  11. 收合提示文字的展開工具背景太長,如何做的跟此網頁一樣

    回覆刪除
  12. http://fkxs.blogspot.tw/p/blog-page_93.html
    麻煩了~

    回覆刪除
  13. <2155759820403944817>(以上內容請勿刪除,從括號之後開始留言).slide_toggle + div 改成 .slide_toggle + span

    <div>填入隱藏的說明內容</div> 改成 <span>填入隱藏的說明內容</span>

    這樣就行了

    回覆刪除
  14. 在這裡發問?站長都回回覆嗎?
    或是作者(版主)會回覆嗎?
    會員“需要再加值嗎?
    希望有人告知! 因為我剛認識這個網站。
    祝大家 福安!

    回覆刪除
    回覆
    1. 你現在是使用 Blogger 留言板,你昨天在這篇文章 FB 留言版詢問,已經回覆了喔

      其他的問題你有用聯絡表單留言,回覆如下:

      1,請問?我是用facebook身份登入的 那我的會員號是甚麼 → 進入會員中心 http://www.wfublog.com/2014/01/wfublog-member-center.html?code=info 就可看到了

      2. 若是加值成加值會員後““有甚麼好處與專享? → 可參考 http://www.wfublog.com/2015/07/member-system-opening.html

      3. 看到專題內容後,若是有疑問”都能夠發問嗎? → 有問題請在相關文章留言即可

      刪除
  15. 請問,我按照上面的步驟,建立一個HTML檔後,
    一開啟是完全閉合的

    轉成PHP檔後,全部都展開的,有方法可解決嗎?
    目前需要一開啟都是閉合的,謝謝

    回覆刪除
    回覆
    1. php 的環境..既然看不到後台, 這就沒辦法 debug 了

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。