Home » jQuery 應用

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

[ 日期： | 瀏覽：89,999 | 迴響：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

  2. 南丁老師 您好：

    我按照您的範例，做了三層的選單
    像是這樣
    1.AAAAA
    1-1.BBBBB
    1-1-1.CCCCC
    也有加入全部展開和全部關閉的效果

    想請教的是，我要如何寫只有展開全部的第二層，而不會連同把第三層展開的效果呢??

  3. 請問南丁老師

    我也是兩個div中間夾個button
    問題
    答案
    設定按下button則答案.slideDown()

    可是為何答案出現位置卻在問題的上面
    謝謝

  4. 請問老師~~
    因為您的範本沒上什麼顏色，所以我試著去放顏色進去，但是不知道該怎麼改才能讓標題在沒被滑鼠碰到的時候呈現底色並用框框圈起來；滑鼠移上去的時候框框消失並且標題和內容的背景是相同顏色...
    本來想說用上次老師說的http://abgne.tw/jquery/apply-jquery/jquery-web-tabs.html加入作用中的語法改改看，但好像又不行，請問我該加上什麼語法才能變更呢？

    這是我改過的東西...
    https://docs.google.com/open?id=0B1dC5j19pJSkMTEzNWZkN2QtNzk1Yy00MmU2LTg4NTAtNGMzYTY1MzAwYWE4

    • 在 css 中的 #qaContent ul.accordionPart li .qa_title 可以設定一般的顏色, 而滑鼠移上去的顏色可以在 #qaContent ul.accordionPart li .qa_title_on 設定
      接著程式大概是可以改成這樣

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

      $(function(){
	// 幫 #qaContent 的 ul 子元素加上 .accordionPart
	// 接著再找出 li 中的第一個 div 子元素加上 .qa_title
	// 並幫其加上 hover 及 click 事件
	// 同時把兄弟元素加上 .qa_content 並隱藏起來
	/*若想用點擊才觸發頁籤切換的話，只要把mouseover事件改成click事件就可以囉。*/
	$('#qaContent ul').addClass('accordionPart').find('li div:nth-child(1)').addClass('qa_title').mouseover(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();
		$(this).toggleClass('qa_title_on');
	}).siblings().addClass('qa_content').hide();
});

  7. 男丁老師, 這個範例無法下載, 找之前的上課範例也找不到, 請問這是在上課範例的哪一個範例例, 我再回去找看看. 謝謝

  8. 請問一下, slideToggle 是不是在ie8 有bug呢?
    我點第一則的FAQ: [是否有提供送貨到離島的服務？]
    ie8收起來時，都會震動一下在回復，Firefox及Chrome不會。

  9. 老師您好，想請教一下，如果是我點了按鈕，視窗希望是左右橫向的滑進貨滑出，應該要怎麼製作呢？
    或是您可以寫一篇關於這樣的教法？感激不盡~~

    • 你想要整頁的效果是用滑進滑出的話, 通常就要用到 Ajax 的方式了, 或者每一頁內容都放在同一頁上才行。

  10. 男丁老師，如果 Q的圖片要加入編號 例如：Q1 Q2 ....這樣我的CSS部分qa_title 和qa_content 要做修改 程式碼部分有需要嗎？

1 2 3 4 5

發表迴響