как показывать только определенный элемент при нажатии другого объекта

Question

У меня есть набор вкладок, каждый из которых содержит собственный набор вопросов, каждый из которых имеет конкретный ответ.

Структура вкладки является звуковой и именно так, как я хотел, чтобы она была построена. Моя проблема заключается в самих вопросах и ответах.

Желаемая функциональность - это когда на вопрос нажимается ответ на этот вопрос. У меня есть простое понимание этого здесь с этим JSFiddle, но я борюсь за то, как различать, какой вопрос нажимается, и, следовательно, какой ответ показывать.

Базовое понимание, Что нужно:

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

Я видел этот fiddle, который использует JQuery-х closest, но не могу понять, как преобразовать, что в моем конкретном коде. Вот что я пробовал безрезультатно:

$(".question").each(function(){ 
    $('.question-text').click(function(){ 
     var $par=$(this).closest('.answer') 
     $par.find(".answer-text").slideDown("1000"); 
    }); 
}) 

Любая помощь в этом была бы принята с благодарностью!

Answer 1

Вы можете удалить итерацию question.each и просто привязать клик на весь вопрос-текст.

При нажатии на вопросительный текст возьмите следующего брата, который является вашим ответом.

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

Answer 2

Вы можете сделать это с помощью parent() в jquery, я думаю, что это похоже на вопрос вопросов и ответов на вопросы. попробуйте приведенный ниже код, заменив имена классов.

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

}); 

});