Question

我有一个简单的常见问题解答列表

<div class='qcontainer'>
    <p>Q:</p>
    <div class='question'>Question</div>
</div>
<div class='acontainer'>
    <p>A:</p>
    <div class='answer'><p>Answer</p></div>
</div>
<div class='qcontainer'>
    <p>Q:</p>
    <div class='question'>Question</div>
</div>
<div class='acontainer'>
    <p>A:</p>
    <div class='answer'><p>Answer</p></div>
</div>

我想要做的就是在点击问题时切换下一个答案者的可见状态。

到目前为止我已经

了

   $('.qcontainer').bind("click", function (e) {
        $('.qcontainer').next('.acontainer').toggle(400);
    });

但是这会切换所有项目，我想要做的只是针对点击的问题找回答案。所以列表中的下一个项目来自点击的对象。

Answer 1

尝试如下，

$('.qcontainer').bind("click", function (e) {
    $(this).next().toggle(400);
});

对于您拥有的标记，.next的{{1}}为qcontainer，因此您只需使用acontainer切换.next而不用担心某事：）

Answer 2

$('.qcontainer').bind("click", function (e) {
        $('.acontainer:visible').hide(0);
        $(this).nextAll('.acontainer').show(400);
    });

Answer 3

看起来你很亲密！

$('.qcontainer').bind("click", function () {
    $(this).next('.acontainer').toggle(400);
});

Answer 4

试试这个，告诉我它是否有效。在答案DIV中，你有一个未闭合的“DIV”。

    <div class='qcontainer'>
        <p>Q:1</p>
        <div class='question'>Question</div>
    </div>
    <div class='acontainer'>
        <p>A:</p>
        <div class='answer'><p>Answer</p></div>
    </div>
    <div class='qcontainer'>
        <p>Q:2</p>
        <div class='question'>Question</div>
    </div>
    <div class='acontainer'>
        <p>A:</p>
        <div class='answer'><p>Answer</p></div>
    </div>

jQuery选择下一个最接近的类

4 个答案: