简单实用jQuery FAQ手风琴特效

<ul class="faq">

  <li class="q">

    <img src="img/arrow.png"> 

    Question 1

  </li>

  <li class="a">Answer 1</li>

  <li class="q">

    <img src="img/arrow.png"> 

    Question 2

  </li>

  <li class="a">Answer 2</li>

  <li class="q">

    <img src="img/arrow.png"> 

    Question 3

  </li>

  <li class="a">Answer 3</li>

</ul>

.faq li { padding: 20px; }

.faq li.q {

  background: #4FC2E;

  font-weight: bold;

  font-size: 120%;

  border-bottom: 1px #ddd solid;

  cursor: pointer;

}

.faq li.a {

  background: #3BB0D6;

  display: none;

  color:#fff;

}             

.rotate class用于小箭头旋转的CSS3样式：

.rotate {

  -moz-transform: rotate(90deg);

  -webkit-transform: rotate(90deg);

  transform: rotate(90deg);

}

// Accordian Action

var action = 'click';

var speed = "500";

$(document).ready(function(){

  // Question handler

  $('li.q').on(action, function(){

    // gets next element

    // opens .a of selected question

    $(this).next().slideToggle(speed)

    // selects all other answers and slides up any open answer

    .siblings('li.a').slideUp();

    // Grab img from clicked question

    var img = $(this).children('img');

    // remove Rotate class from all images except the active

    $('img').not(img).removeClass('rotate');

    // toggle rotate class

    img.toggleClass('rotate');

  });

});