別のものがクリックされたときに特定の要素のみを表示する方法

Question

それぞれの質問に固有の回答を持つそれぞれの質問が含まれる一連のタブがあります。

タブ構造は、音と正確に私が構築されたときにそれになりたかった方法です。私の問題は質問と答えにあります。

質問がクリックされたときに所望の機能は、その質問に対する答えが示されるべきです。私はこのJSFiddleでこれを簡単に把握していますが、どの質問がクリックされているかを判断する方法に苦労しています。

必要いただきましたの基本的な理解：

$('.question-text').click(function(){ 
    $(".answer-text").toggleClass("hidden"); 
}); 

私はjQueryのclosestを使用していますが、私の特定のコードにそれを変換する方法を見つけ出すカント、このfiddleを見ました。ここで私が無駄にしようとしているもの：

これについての助けがあれば幸いです。

Answer 1

あなたは反復question.eachを削除して、単純にすべての質問テキストをクリックしてバインドすることができます。質問テキストをクリックする

は、あなたの答えである次の兄弟をつかみます。

$('.question-text').click(function(){ 
     var $par=$(this).next() 
     $par.find(".answer-text").toggleClass("hidden"); 
    }); 
}) 

Answer 2

jqueryでparent（）を使用すると、よくある質問と似ていると思います。クラス名を置き換えて、以下のコードを試してみてください。

<script> 

$（ドキュメント）.ready（関数（）{

$('.faq_question').click(function() { 

    if ($(this).parent().is('.open')){ 
     $(this).closest('.faq').find('.faq_answer_container').animate({'height':'0'},500); 
     $(this).closest('.faq').removeClass('open'); 

     }else{ 
      var newHeight =$(this).closest('.faq').find('.faq_answer').height() +'px'; 
      $(this).closest('.faq').find('.faq_answer_container').animate({'height':newHeight},500); 
      $(this).closest('.faq').addClass('open'); 
     } 

}); 

}）。