.slideToggle类基于.click单独

Question

基本上尝试写这样的东西。单击.button和它.slideToggle（s）它关联.box Div。将它们嵌套在容器div中以尝试不同的方法。

我感到愚蠢，这已被多次询问过。我已经尝试了至少十几个我无法工作的东西。

代码在这里。

http://jsfiddle.net/BurRQ/25/

<div class="container">
    <div class="header">
        <a href="#" class="toggle">TOGGLE</a>
    </div>
    <div class="box">
        <p>Content</p>
    </div>
</div>​

干杯。

Answer 1

在尝试使用.parent之前，您需要使用.next方法移回标题。

http://jsfiddle.net/BurRQ/26/

之前

$('.toggle').click(function(){
    $(this).next('.box').slideToggle("slow");
}); // .click

之后

$('.toggle').click(function(){
    $(this).parent().next('.box').slideToggle("slow");
}); // .click

Answer 2

有很多方法可以做到这一点，这里有三个（因为我可以给他们起个名字）

家庭方法：$(this).parent().siblings('.box').slideToggle();

最近的查找方法：$(this).closest('.container').find('.box').slideToggle();

下一个父方法：$(this).parent().next().slideToggle();