如何仅在单击另一个元素时显示特定元素

Question

我有一组选项卡，每个选项卡都包含一组自己的问题，每个问题都有特定的答案。

该选项卡的结构是合理的，并且完全符合我的要求。 我的问题在于问题和答案本身。

所需的功能是单击问题时，应显示该问题的答案。 我在这里通过JSFiddle对此有一个简单的了解，但是我正在努力如何区分正在单击的问题与要显示的答案之间。

对所需内容的基本了解：

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

我看到了这个使用jquery closest 小提琴 ，但无法弄清楚如何将其转换为我的特定代码。 这是我没有用的尝试：

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

任何帮助，将不胜感激！

Answer 1

您可以删除重复的问题。每个并简单地绑定单击所有问题文本。

单击问题文本后，抓住下一个兄弟姐妹即您的答案。

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

Answer 2

您可以在jquery中使用parent（）来完成此操作，我认为它类似于FAQ问题和答案视图。 通过替换您的类名尝试以下代码。

<script>

$（document）.ready（function（）{

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

});

}）;