javascript - JQuery FAQ slider 答案不会隐藏？

Question

我正在使用 JQuery 为 FAQ 问题制作一个垂直 slider ，即您单击问题，答案就会向下滑动。一切正常，除了我的答案在页面加载时没有隐藏。如果您单击一个问题使答案向上滑动，然后再次单击同一个问题使答案向下滑动，只有这样其余的答案才会向上滑动并隐藏。有人能看出我做错了什么吗。

CSS

<style type="text/css">
ul.qanda{
    color:#f5f5f5;
    list-style:none;
    margin:0;padding:0}
.qanda li{
    border:1px solid #f5f5f5;
    margin:1em 0;padding:0}
.qanda .question{
    cursor:pointer;
    display:block;
    font-size:1.3em;
    font-weight:300;
    padding:.75em 1.25em;
    position:relative}
.qanda .answer{
    border-top:1px dashed #f5f5f5;
    display:block;
    padding:.75em 1.25em}
.qanda a{
    color:#ccc}
.qanda .question{
    padding-left:1.5em}
.qanda .question:before{
    content:"+";
    font-weight:700;
    position:absolute;
    left:.5em}
.qanda .active:before{
    content:"-"}
</style>

JQuery

<script type="text/javascript">
$(document).ready(function(){
  $(".question").click(function(){
   var a = $(this).parent('li').find('.answer');
    if ( a.css('display') == 'none' ) {
        $('.question').removeClass('active');
        $('.answer').slideUp('fast');
        a.slideDown();
        $(this).addClass('active');
    } else {
            a.slideUp();
            $(this).removeClass('active')
    }
  });  });
 </script>

HTML

<ul class="qanda">
    <li>
            <strong class="question">Q: Question?</strong>
            <span class="answer">
                    A: Answer
            </span>
    </li>
    <li>
            <strong class="question">Q: Question?</strong>
            <span class="answer">
                    A: Answer
            </span>
    </li>
    <li>
            <strong class="question">Q: Question?</strong>
            <span class="answer">
                    A: Answer
            </span>
    </li>
    <li>
            <strong class="question">Q: Question?</strong>
            <span class="answer">
                    A: Answer
            </span>
    </li>

</ul>

Answer 1

http://jsfiddle.net/H8k8c/1/

  $(document).ready(function () {
   $('.answer').hide();
   $(".question").click(function () {
       var a = $(this).parent('li').find('.answer');
       if (a.css('display') == 'none') {
           $('.question').removeClass('active');
           $('.answer').slideUp('fast');
           a.slideDown();
           $(this).addClass('active');
       } else {
           a.slideUp();
           $(this).removeClass('active')
       }
   });

});