javascript - jQuery slideToggle() 中的特定对象

Question

我正在使用 jQuery slideToggle() 方法尝试显示特定标题的更多信息。我在这里创建了一个示例:

http://ysk.co.za/slidetoggle/

我的问题是，当您单击显示一个标题的更多信息时，它会显示所有标题的更多信息。我该怎么做才能让它只显示该特定标题的更多信息而不必id每个按钮和id每个段落然后制作Javascript 中每个函数的新函数？

我的 HTML 是:

        <div>
    <h2>The sun</h2>
    <button>Display more info</button>
    <p>The sun is shiny and is the symbol of daylight, it is a burning ball of gas</p>
</div>
<hr>
<div>
    <h2>The moon</h2>
    <button>Display more info</button>
    <p>The moon is a tiny planet and is the symbol night</p>
</div>
<hr>

我的 Javascript 是:

$(document).ready(function(){
$("button").click(function(){
    $("p").slideToggle("slow")
})
})

非常感谢您的帮助。

Answer 1

尝试:

$(document).ready(function(){
    $("button").click(function(){
        $(this).parent().find("p").slideToggle("slow")
    });
});

DEMO.