Dribs & Drabs
台灣旅遊 Taiwan
設計 Design
其他 Others
當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