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

您要定位的p元素是所点击按钮的下一个兄弟，因此请使用.next()

$(document).ready(function () {
    $("button").click(function () {
        $(this).next().stop(true, true).slideToggle("slow")
    })
})

演示：Fiddle

Answer 2

尝试：

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

DEMO.

jQuery slideToggle（）中的特定对象

2 个答案: