可展开和收缩的jquery FAQ问答列表特效

这是一款简单的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();
    }
  });
})