这是一款简单的jquery FAQ问答列表特效。该FAQ问答列表可以通过点击问题的标题来展开或收缩列表，它使用简单，方便实用。

使用方法

在页面中引入jquery。

HTML结构

该FAQ问答列表采用无序列表作为HTML结构：

CSS样式

为该FAQ问答列表设置以下的CSS样式。

@charset "utf-8";

*{margin:0;padding:0;list-style-type:none;}

a,img{border:0;}

a{text-decoration:none;}

body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}

.clearfix{display:inline-table}

*html .clearfix{height:1%}

.clearfix{display:block}

*+html .clearfix{min-height:1%}

.UI-bubble{display:inline-block;width:23px;height:23px;overflow:hidden;background:url(../images/sicons.png) 0px 0px no-repeat;}

.UI-ask{display:inline-block;width:23px;height:23px;overflow:hidden;background:url(../images/sicons.png) -25px 0px no-repeat;}

/* questions */

#questions{width:772px;margin:20px auto;border:1px solid #e7e7e7;padding-top:14px;}

#questions li h5 .UI-ask,#questions li h5 .UI-bubble{position:absolute;left:0px;top:9px;}

#questions li{border-bottom:1px solid #e7e7e7;padding:0 14px 5px 14px;vertical-align:bottom;}

#questions li h5{height:40px;position:relative;color:#666;font-size:14px;cursor:pointer;line-height:40px;height:40px;overflow:hidden;padding:0 0 0 26px;}

#questions li .foldContent{border-left:3px solid #018ccb;padding:10px 26px;border-top:1px dashed #e2e2e2;line-height:24px;background:#f3f3f3;color:#888;}

JavaScript

在页面DOM元素加载完毕之后，使用下面的方法使用户点击列表标题可以展开和收缩列表。

$(function(){

$("li>h5","#questions").bind("click",function(){

var li=$(this).parent();

if(li.hasClass("fold")){

li.removeClass("fold");

$(this).find("b").removeClass("UI-bubble").addClass("UI-ask");

li.find(".foldContent").slideDown();

}else{

li.addClass("fold");

$(this).find("b").removeClass("UI-ask").addClass("UI-bubble");

li.find(".foldContent").slideUp();

}

});

})