顯示隱藏與點擊相同的類名

Question

我想建立簡單的列表與一些問題和答案。點擊該問題時，答案如下所示，在頁面加載時隱藏。我爲所有問題使用同一個班級，所以問題是當我點擊擴大答案時，所有下面的答案正在擴大。我該如何解決這個問題？以下是腳本。 的jsfiddle：http://jsfiddle.net/36Y5w/

<script type="text/javascript"> 
$(document).ready(function() { 

    $('.faq_content').hide(); 

    $('.faq_circle').click(function(){ 
     var $target = $('.faq_content'); 
     if($target.is(':visible')){ 
      $target.slideUp(400,function(){ 
       $target.addClass('feature-folded'); 
      }); 
      $(this).text('+'); 
     } 
     else{ 
      $target.removeClass('feature-folded'); 
      $target.slideDown(); 
      $(this).text('-'); 
     } 
    }); 

}); 
</script> 

Answer 1

$('.faq_circle').click(function(){ 
     var $target = $(this).next().children('.faq_content'); 
     if($target.is(':visible')){ 
      $target.slideUp(400,function(){ 
       $target.addClass('feature-folded'); 
      }); 
      $(this).text('+'); 
     } 
     else{ 
      $target.removeClass('feature-folded'); 
      $target.slideDown(); 
      $(this).text('-'); 
     } 
    }); 

Answer 2

而是針對帶班 '.faq_content' 的所有元素，只需選擇與該類下一個元素。這應該夠了吧。

var $target = $(this).next('.faq_content');