Home » jQuery 應用

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

[ 日期： | 瀏覽：88,968 | 迴響：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. 男丁格爾老師，請問範例3的"全部展開"和"全部隱藏"如何改成用一個按鈕就可以全部展開和隱藏呢？
    謝謝您的指導~

    • 這樣你可以自己用一個變數來記錄現在是按下全展開還是隱藏
      然後再依此變數來進行動作的控制

  3. 男丁格爾老師，我想在頁面內增加實時跳轉到指定問題的鏈接，增加了如下代碼：q10 結果發現必須刷新這個鏈接地址，才能正確打開這個id的問題，有什麽辦法實現嗎？

      • 同一頁的話要針對你點擊的超連結來加程式才可以, 例如

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

        <script>
	$('.abgne').click(function(){
		$(this.href).click();
		return false;
	});
</script>
 
<a href="#q10" class="abgne" rel="nofollow">10</a>

        • 添加上了這段代碼，沒有反應！如果，有多個這樣的同一頁的鏈接，是不是要給每個鏈接添加 個單獨的 class？

          • 改一下, 改用 $(this.hash).click();
            不用每個都給不同的 class..同一個就好

  6. 男丁老師您好，我現在是把 .qa_title的欄位裡面塞入了其他的class... (因為東西有點多)

    結果在Chrome裡面，除了第一行文字之外的DIV標籤內容全部都會被display: block; 出不來@@"

    請教這個問題應該要如何修改呢?

  8. 南丁老師，我在頁面加入範例，是可以運作正常，但在頁面中的其他位置裡(不是範例裡)，我有設定連結，連到外面的網站，卻沒有動作，請問要調整那裡，才能讓連結運作。謝謝！

    • 你是用第幾個範例呢?有可能是程式中有加入到像

      檢視原始碼 JavaScript
      1
2
3

      $('a').click(function(){
	return false;
});

      類似的語法吧, 這也要看到你的網站才知道問題在那XD

      • 南丁老師，這是我放範例的網站 molic.com, 我範例裡的連結是可以開的，但上方的連結就失去效用。備註 : 我好想去上您的課...但看到時，想上的課9月1號就開課了，請問接著還會再開課嗎 ?? (JQ 和CSS DIV)

  9. 請教老師,我以下述的語法結果上面會有一大空格, 請問應該如何修正?
    ~~~~~~~~~~~~~~~~~~~~~~~

    問與答 Q&A

    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(http://avierpro.com/wp-content/uploads/2013/10/qa_group_1.gif) no-repeat;
    }
    #qaContent h3.qa_group_2 {
    background: url(http://avierpro.com/wp-content/uploads/2013/10/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(http://avierpro.com/wp-content/uploads/2013/10/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(http://avierpro.com/wp-content/uploads/2013/10/icon_q_a.gif) no-repeat 0px -24px;
    padding-left: 28px;
    color: #666;
    }

    $(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

發表迴響