jQuery DOM Traversal

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> 

现在，当用户点击一个<header>，我想兄弟<p>执行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'); 
}); 

Live Example

.next

Answer 2

我通过初始化文件上准备单击处理解决了问题。解决办法如下：

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