jQuery DOM 遍历

Question

我一直在尝试将 $.click 处理程序绑定到同级元素，但似乎找不到正确选择要设置动画的元素的方法。以下是我正在使用的 DOM 树的基本结构：

<section id="a">
    <div id="b" class="foo" draggable="true">
        <header style="cursor:pointer;">1.</header>
        <p class="foo">Bar</p>
    </div>
    <div id="c" class="foo" draggable="true">
        <header style="cursor:pointer;">2.</header>
        <p class="foo">Bar</p>
    </div>
    <!-- and so on... -->
</section>

现在，当用户单击

时，我想要同级

> 执行 jQuery.slideToggle()。此时，我有以下 JavaScript，但无济于事：

$('header').click(function() {
    $(this).parent().children("p").slideToggle('slow');
    // I also tried:
    $(this).parent().children("p.foo").slideToggle('slow');
    // but as I expected, there was no difference.
});

因此为了澄清，一个非常冗长的版本将是：

$('div#b.foo header').click(function(){
    $('div#b.foo p.foo').slideToggle('slow');
});
$('div#c.foo header').click(function(){
    $('div#c.foo p.foo').slideToggle('slow');
});
// ...

如果这还不够清楚，请让我详细说明。

Answer 1

您可以尝试

$('header').click(function() {
    $(this).next().slideToggle('slow');
});

实时示例

.next

Answer 2

我通过在文档就绪时初始化单击处理程序解决了该问题。解决方法如下：

$(document).ready(function() {
    $('header').click(function() {
        $(this).next().slideToggle('slow');
    });
});