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

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

});

}）;

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

2 个答案: