这是一款简单的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(); } }); })
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!