这是一款简单的jquery FAQ问答列表特效。该FAQ问答列表可以通过点击问题的标题来展开或收缩列表,它使用简单,方便实用。
使用方法
在页面中引入jquery。
<script type="text/jscript" src="js/jquery.min.js"></script>
HTML结构
该FAQ问答列表采用无序列表作为HTML结构:
<div id="questions">
<ul>
<li class="clearfix">
<h5><b class="UI-ask"></b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit?</h5>
<div class="foldContent">
<p>Lorem ipsum dolor sit amet, ......</p>
</div>
</li>
......
</ul>
</div>
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();
}
});
})