Question

我有一个常见问题解答页面，我试图在点击某个问题时获得某个答案。

以下是代码：

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的下一个元素，你必须知道如果有另一个元素，那么将有一个不同的登录（例如，使用类，或使用{ {1}}以确保您仅选择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解决方案就是您所需要的。

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

5 个答案: