JQuery显示/隐藏常见问题

Question

当用户单击某个类元素时，我在使用JQuery显示和隐藏时遇到了一些问题。

我的HTML代码是：

<div class="faqSectionFirst">
Question?

<p class="faqTextFirst" style='text-align:justify'>
<span>
Some text.
</span>
</p>
</div>

我的JS代码是：

$('.faqSectionFirst').on("click", function(){

if( $('.faqSectionFirst').index(this) ) {
    $('p.faqTextFirst').show();
} else {
    $('p.faqTextFirst').hide();
}
}
);

有人能帮我吗？这不管用。我有20个问题，有20个答案，我想让它对所有人都有效。

Answer 1

试试这个：

$('.faqSectionFirst').on("click", function () {
    $('p.faqTextFirst', this).toggle();
});

小提琴

Answer 2

使用<dd><dt>的最佳方法

HTML

<dl >
    <dt>Question 1?</dt>
    <dd>Answer of Question 1.</dd>
    <dt>Question 2?</dt>
    <dd>Answer of Question 2.</dd> 
</dl>  

CSS

dd { display:none; }
dt { padding:4px; font:bold 13px verdana;cursor:pointer;}  

jQuery

$(document).on('click','dt', function() {
    var myDD = $(this).next('dd');
    $('dd').slideUp();
    myDD.slideToggle();
});

Working Example

Answer 3

如果我正确理解问题，您可以使用JQuery accordian。标题可以表示问题，而可扩展的面板则表示答案。