JQuery FAQ滑块回答不会隐藏？

Question

我正在使用JQuery为常见问题制作垂直滑块，即您单击问题并将答案向下滑动。一切正常，除非我的答案在页面加载时不隐藏。如果您单击一个问题，以便答案向上滑动，然后再次单击相同的问题以向下滑动答案，只有其他答案滑动并隐藏。有人可以看到我做错了什么。

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') 
     } 
    }); 

}）;

Answer 2

只需添加一个$('.answer').hide();到您的代码。

jsFiddle example