教學 | jQuery 部落格也能有伸縮式的Q&A

1407505443-3174794774

當Q&A問與答累積到一定數量時,就很需要這個功能,方便訪客尋找需要的問題,版面也不會太過冗長

不一定只適用於Q&A,像商品列表、留言列表等都是不錯的延伸應用




先看下方的範例,或是看本站的Q&A問答集

(請點選標題,內文會自動出現在下方。若無法點選請重新整理網頁,有時是因為網頁還在載入資料中)

Question – 1

Answer – 1

Question – 2

Answer – 2

Question – 3

Answer – 3

(0) 先前題提要

需要一點HTML概念,但很簡單,只要照著步驟應該都沒問題

(1) jQuery

先至後台>側邊欄位設定,建立一個新版位,標題可設成”Q&A設定”,接著把以下語法放入

也可以放在公告區塊或是頁尾描述,但之後會比較不好管理

(不好管理的意思是怕之後忘記這段語法的功能,新增版位可以設定版位標題一目了然)

<script type=”text/javascript” src=”http://code.jquery.com/jquery-latest.min.js”></script>

<script type=”text/javascript”>

jQuery(function($){

$(“p.Question”).css({cursor:”pointer”}).click(function(){

$(this).next().toggle(“normal”);

});

});

</script>

(2) CSS

這部分是美化的語法,放在跟(1)一樣的地方,接在後面即可,可自行修改美化

ps. 本站的Q&A範例因配合版面有做修改,所以大家套用後會跟範例長得不太一樣喔

<style type=”text/css”>

#QandA .Question{ /*標題的CSS定義*/

width: 100%;

border-bottom: 1px #aaa dotted;

}

#QandA .Answer{ /*內文的CSS定義*/

display: none;

width: 100%;

padding: 10px 0px;

background: #efefef;

border-bottom: 1px #aaa dotted;

}

#QandA:hover{ /*滑鼠移至區塊變色*/

background: #ebf6f7;

}

</style>

(3) HTML

這部分的語法要放在文章中,需要開啟HTML模式再放入,建議直接在HTML模式編輯

這邊需要一點HTML基礎,至少要知道如何把這段語法放到想要的位置

標註顏色的地方是Q&A的標題與內文,需自行修改

以下範例是兩個Q&A,若要多個就複製HTML語法接在後方即可

ps.如果要看成果只能把文章存檔到部落格觀看,按痞客後台的預覽是沒有用的喔!

<div id=”QandA”>

<p class=”Question”>Question – 1</p>

<div class=”Answer”>

<p>Answer – 1</p>

</div>

</div>

<div id=”QandA”>

<p class=”Question”>Question – 2</p>

<div class=”Answer”>

<p>Answer – 2</p>

</div>

</div>

Murmur

應該還算簡單吧,只有第三步驟需要一點手動 🙂

不過要注意,只要部落格裡有一篇文章有用到這技巧,第一、二步驟的語法就不能刪除,不然會失效

 

♥ 部落格樣式 – 實用教學: https://www.dribs-drabs.com/blog/category/1358731