Home » jQuery 應用

[jQ]滑出式問與答(Q&A)清單

[ 日期： | 瀏覽：90,003 | 迴響：96 ]
範例 1
範例 2
範例 3
請協助我把這個效果加到我的網站 (只要 900 元)
沒錯!只要 900 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

一般商務型或是需要有客服的網站都會提供簡易的問與答頁面，會把一些常見的問題整理成一個清單後，接著再針對問題來一一回答。當顧客有使用上或是其它疑問時，可以先自行透過問與答來找找看是否有符合自己問題的項目。

但請試著想像一下，若每一項問題的回答都2-3行的話，當問題項目一多的時候，這樣網頁就會變的很長很長...。如果能把回答暫時先隱藏起來，當顧客點擊到該問題項目時才展開答案的話，至少網頁應該就會變的比較乾淨一點。

因為問與答是一對一的項目型態，因此筆者就直接用 ul 及 li 來當做項目使用：

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9

<div id="qaContent">
	<h3 class="qa_group_1">問題分類</h3>
	<ul class="accordionPart">
		<li>
			<div class="qa_title">問題</div>
			<div class="qa_content">答案</div>
		</li>
	</ul>
</div>

h3 是用來當做問題分類用的，等等也會用 CSS 來把它加上背景圖片做美化。而每一組 li 都會有問題及答案的 div，且各自有不同的 className。

檢視原始碼 CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}
#qaContent {
	width: 500px;
}
#qaContent h3 {
	width: 500px;
	height: 22px;
	text-indent: -9999px;
}
#qaContent h3.qa_group_1 {
	background: url(qa_group_1.gif) no-repeat;
}
#qaContent h3.qa_group_2 {
	background: url(qa_group_2.gif) no-repeat;
}
#qaContent ul.accordionPart {
	margin: 10px 10px 50px 30px;
}
#qaContent ul.accordionPart li {
	border-bottom: solid 1px #e3e3e3;
	padding-bottom: 12px;
	margin-top: 12px;
}
#qaContent ul.accordionPart li .qa_title {
	background: url(icon_q_a.gif) no-repeat 0px 3px;
	padding-left: 28px;
	color: #1186ec;
	cursor: pointer;
}
#qaContent ul.accordionPart li .qa_title_on {
	text-decoration: underline;
}
#qaContent ul.accordionPart li .qa_content {
	margin: 6px 0 0;
	background: url(icon_q_a.gif) no-repeat 0px -24px;
	padding-left: 28px;
	color: #666;
}

CSS 這邊只是幫 h3 標題換成指定的背景圖片標題，且把問題及答案前面都加個 Icon 來區別用。

最後就是 jQuery 上場來幫我們的問與答加上魔法效果囉：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12

$(function(){
	// 幫 div.qa_title 加上 hover 及 click 事件
	// 同時把兄弟元素 div.qa_content 隱藏起來
	$('#qaContent ul.accordionPart li div.qa_title').hover(function(){
		$(this).addClass('qa_title_on');
	}, function(){
		$(this).removeClass('qa_title_on');
	}).click(function(){
		// 當點到標題時，若答案是隱藏時則顯示它；反之則隱藏
		$(this).next('div.qa_content').slideToggle();
	}).siblings('div.qa_content').hide();
});

最後我們就能預覽畫面及效果：



這樣是不是效果會比落落長的清單好很多呢？！不過若是清單一多時，要一一幫問題及答案加上 className 就變成是麻煩的事(可用後端程式來輸出)，所以筆者這邊就把它改用程式來加：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$(function(){
	// 幫 #qaContent 的 ul 子元素加上 .accordionPart
	// 接著再找出 li 中的第一個 div 子元素加上 .qa_title
	// 並幫其加上 hover 及 click 事件
	// 同時把兄弟元素加上 .qa_content 並隱藏起來
	$('#qaContent ul').addClass('accordionPart').find('li div:nth-child(1)').addClass('qa_title').hover(function(){
		$(this).addClass('qa_title_on');
	}, function(){
		$(this).removeClass('qa_title_on');
	}).click(function(){
		// 當點到標題時，若答案是隱藏時則顯示它，同時隱藏其它已經展開的項目
		// 反之則隱藏
		var $qa_content = $(this).next('div.qa_content');
		if(!$qa_content.is(':visible')){
			$('#qaContent ul li div.qa_content:visible').slideUp();
		}
		$qa_content.slideToggle();
	}).siblings().addClass('qa_content').hide();
});

筆者還增加新的效果：當點擊某一項目時，會先把其它已經展開的項目給隱藏起來，保持一次只有一個是展開的。

範例 1 範例 2 範例 3 範例 4 範例 5

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

96 筆針對 [jQ]滑出式問與答(Q&A)清單 的迴響

1 2 3 4 5

  1. 男丁大大:
    我用IE8 瀏覽時，清單收合及打開後會有沒對好的問題，必須用滑鼠滑過去才會恢復正常。
    用 firefox 就不會。
    請問是哪邊需要修改呢?
    謝謝~

  3. 您好～我有將您的程式碼複製下來～並且從新開啓一個頁面製作～但似乎都不動說～圖層命名方式也都跟您相同～想請問您是否有哪些地方要注意的～謝謝您～

  4. 老師，不好意思，請教一下，若是我的問與答需要在同一個頁面中自動換行，我需要在那邊做設定呢?或是設定每幾題(例如15題)就可以換到下一行，有使用Left控制，但是好像沒有效果，還是我的方法錯誤呢，麻煩老師解惑，謝謝^^

    • 同一頁換頁的話..除了 Ajax 之外..還能用程式去控制一次最多顯示幾筆..
      然後當要下一頁時.再顯示欲顯示的數量及內容

  5. 老師，不好意思，可能是我這邊說明的不清楚，目前需要的不是換頁，是換行，也就是限定一行有幾題，每幾題換一行，顯示在同一個頁面。如下圖：
    1.XXX 6.XXX 11.XXX
    2.XXX 7.XXX 12.XXX
    3.XXX 8.XXX
    4.XXX 9.XXX
    5.XXX 10.XXX
    因為程式是用問題與答案是用div包著，所以難達到此排列方式，因此改成span包覆，但是好像也沒換行的功能，請教老師有辦法可以解決嗎?

  6. 男丁您好：
    　　現在遇到一個問題，想請問一下，這個範例我已經改成「滑鼠移過就會出現答案」，但所有版面會跟著動，能否改成滑鼠移過出現一個框，而答案放在那個框裡呢？
    　　就像這頁最下方的「梅問題教學網」那樣，滑鼠移過去時會出現「梅問題教學網」的字樣，但出現的框裡我需要放很多文字及一張圖片。可否有解決方法，需要改那行的程式？
    　　謝謝！

    • 這你要當 hover() 時..取得目前的滑鼠座標後..
      把 div 移到該位置並顯示出來..也許下次寫個類似的範例教學

    • 可以並存的..
      你先載 Prototype.js 後再載 jQuery.js
      然後先寫一段

      檢視原始碼 JavaScript
      1

      jQuery.noConflict();

      這樣...jQuery 會把 $ 還給第一個實現它的物件身上...
      接下來我們使用 jQuery 時...就都寫完整的就可以了( $ 改用 jQuery)

  8. 男丁您好：
    　　不好意思，那想請問一下，範例會需要等很久嗎？因為有點急！還是可以告訴我取「滑鼠座標的方式」我可以自己研究一下！
    　　謝謝！

    • 取滑鼠的座標可以透過事件中的 event 來取得..

      檢視原始碼 JavaScript
      1
2
3
4
5
6

      <div id="log" style="width:300px;height:400px;border:solid 1px black;"></div>
<script type="text/javascript">
	$("#log").mousemove(function(e){
		$(this).html("X=" + e.pageX + ", Y=" + e.pageY);
	});
</script>

      不過還是有些細節要注意

  10. 謝謝老師的解答，還有一個問題，我把Q&A分類做成頁籤，我希望可以針對打開的那個頁籤裡的清單做全部展開和隱藏，要怎麼改呢？

1 2 3 4 5

發表迴響