問題討論區


【JavaScript 語法】文章精華區


【教學】 [jQuery]滑出式問與答(Q&A)清單



[jQuery]滑出式問與答(Q&A)清單
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
一般商務型或是需要有客服的網站都會提供簡易的問與答頁面,會把一些常見的問題整理成一個清單後,接著再針對問題來一一回答。當顧客有使用上或是其它疑問時,可以先自行透過問與答來找找看是否有符合自己問題的項目。

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

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


<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。


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 上場來幫我們的問與答加上魔法效果囉:


$(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();
});


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

Open in new window


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


$(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();
});


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

範例瀏覽:
http://demonstration.abgne.tw/jquery/0018/0018_1.html
http://demonstration.abgne.tw/jquery/0018/0018_2.html


以上內容於2010-02-08 13:19 發表在 http://abgne.tw/jquery/apply-jquery/slide-q-and-a-list.html

2010/2/24 13:15
 









[高級搜索]


 

課程首頁】 【最新開課時間表】 【範例教學分享區】 【交流討論區】 【企業包班】 【詢問課程】 【合作提案】 【誠徵講師

 

【飛肯設計學苑】 台北市公園路 30-1 號 5 樓 聯絡電話:(02)2370-1122 / 0925-014-000 信箱:flycan@flycan.com.tw
服務時間:(平日)下午 2 點 ~ 晚上 10 點 / (假日)早上 9 點 ~ 下午 5 點

 

台北市短期補習班立案 第 6631 號

TOP

【 Flycan.com 】 Powered by XOOPS