单击特定的div时显示特定的内容JS / jQuery

Question

我有一个“常见问题解答”页面，我试图在其中获得某个答案，以显示单击某个问题时的情况。

这是一个小提琴： http : //jsfiddle.net/hdr6shy9/

这是代码：

HTML：

<div class="questions">
    <div>First Question</div>
    <p>Answer to first questions</p>
    <div>Second Question</div>
    <p>Answer to second Question</p>
    <div>Third Question</div>
    <p>Answer to third question</p>
</div>

CSS：

.questions div{
    cursor:pointer;
    margin:10px 0;
}

p{
    display:none; 
    background-color:#f4f4f4;
    padding:10px;
}

我希望p根据单击的正确div问题显示。 有什么帮助吗？ 谢谢

Answer 1

使用此代码：

$(".questions div").on('click', function() {
    $(".questions p").hide();
    $(this).next().show();
});

这将显示被单击的div的下一个元素，您必须知道，如果将要有另一个元素，那么将有一个不同的登录名（例如，使用类，或使用.next('p') ，以确保仅选择了p元素）。

小提琴已更新且可以使用： http : //jsfiddle.net/hdr6shy9/8/

Answer 2

还不错，这是一种方法：

$('.question').click( function() {
   $(this).next('p').show(); 
});

Answer 3

您可以为此使用Jquery：

$( ".questions div" ).click(function() {
  $( this ).next().show();
});

http://jsfiddle.net/hdr6shy9/5/

Answer 4

这是一个小提琴，显示了实现此目的的可能方法：

$('.question').click( function() {
   $(this).next('p').show(); 
});

http://jsfiddle.net/d0qhm4xv/1/

Answer 5

我建议您将id属性添加到问题div并回答p ，为什么？ 也许将来您需要重组FAQ页面，并且很容易维护。

<div class="questions">
    <div id="1">First Question</div>
    <p id="a1">Answer to first questions</p>
    <div id="2">Second Question</div>
    <p id="a2">Answer to second Question</p>
    <div id="3">Third Question</div>
    <p id="a3">Answer to third question</p>
</div>

$('.questions div').click(function(){        
    var qid = $(this).attr('id');
    $('#a'+qid).show();
});

如果将来您要像这样更改HTML：

<div class="questions">
    <div id="1">First Question</div>
    <div id="2">Second Question</div>
    <div id="3">Third Question</div>
</div>
<div class="answers">
    <p id="a1">Answer to first questions</p>
    <p id="a2">Answer to second Question</p>
    <p id="a3">Answer to third question</p>
</div>

相同的javascript代码将起作用。

否则，您需要@lolkidoki解决方案。