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

I have a set of tabs that will each contain there own set of questions with each question having a specific answer.

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

The tab structure is sound and exactly how I wanted it to be when built. My problem lies with the questions and answers themselves.

标签结构是合理的,正是我想要它在构建时的样子。我的问题在于问题和答案本身。

The desired functionality is when a question is clicked the answer for that question should be shown. I have a simple grasp of it here with this JSFiddle but I am struggling on how to differentiate between what question is being clicked and therefore which answer to show.

所需功能是在单击问题时应显示该问题的答案。我在这里用这个JSFiddle简单地掌握了它,但我正在努力如何区分被点击的问题以及所显示的答案。

Basic understanding of whats needed:

基本了解所需的内容:

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

I saw this fiddle that uses jquery's closest but cant figure out how to convert that to my particular code. Here is what I have tried with no avail:

我看到这个小提琴使用jquery最接近,但无法弄清楚如何将其转换为我的特定代码。这是我试过的无济于事:

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

Any help on this would be greatly appreciated!

任何有关这方面的帮助将不胜感激!

2 个解决方案

#1

You can remove iterating question.each and simply bind click on all the question-text.

您可以删除迭代的question.each,只需单击所有问题文本即可。

When the question-text is clicked , grab the next sibling which is your answer.

点击问题文本后,抓住下一个兄弟,这是你的答案。

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

#2

You can do it using parent() in your jquery, i think it is similar as FAQ question and answers view. try the below code by replacing your class names.

您可以在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');
        }

});

});

#1