Home » jQuery 應用

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

[ 日期： | 瀏覽：90,004 | 迴響：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. 男丁大師：
    之前是網頁編排，所以對這方面我很菜，但很想學會。
    請問這樣是html css javaScript三個檔嗎?還是共一個呢?

  4. to derek
    還是不懂!為何我的畫面沒有出現問題、答案等等呢
    當然也不會動了。可以貼個完整一樣的給我看嗎??

  5. 問題分類

    問題
    答案

    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;
    }
    // 全部展開
    $('#qaContent .qa_showall').click(function(){
    $('#qaContent ul.accordionPart li div.qa_content').slideDown();
    return false;
    });

    // 全部隱藏
    $('#qaContent .qa_hideall').click(function(){
    $('#qaContent ul.accordionPart li div.qa_content').slideUp();
    return false;
    });
    $(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();
    });

    不知是否漏掉什麼了

    • 唔...這位同學..你貼的都是我的 code...這..沒什麼幫助啊..
      把整個 html + js + css 寄給我試看看吧XD

  7. 南丁
    請問我要從另一個頁面連結到特定的問題時,
    要怎麼讓特定的答案展開呢? (預設是全關...)
    謝謝~

    (新手真是萬事起頭難啊~~) XD

  9. 請問,不同瀏覽器都相容嗎??
    因為我用火狐的話可以看到每一個的標題
    但是ie8就只能看見第一個了

  10. 老師~請問如果「訂購相關問題」、「退貨相關問題」也是收合的項目(意思是總共有兩層收合項目)，這部分網頁程式碼和javascript該如何做調整?

1 2 3 4 5

發表迴響