Jquery .next（）帮助

Question

我使用以下代码隐藏并在一堆搜索结果中显示一个框。每个结果都有自己的切换和框来显示和隐藏。我遇到的问题是，单击任何一个切换将显示和隐藏页面上的所有框，而不仅仅是一个结果的框。我怎么能这样做？

由于

jQuery(document).ready(function ($) {

    $("div.MoreResultsTrigger").click(function (e)
    {
        $("div.MoreResultsTrigger").next().slideToggle('fast');
    });

});

使用HOVER更新的代码

 $('a.MoreResultsTrigger').hover(
        function () {
            $(this).next().show();
        },
        function () {
            $(this).next().hide();
        }
    );

Answer 1

使用this关键字，因为您只想隐藏点击旁边的元素。

jQuery(document).ready(function ($) {

    $("div.MoreResultsTrigger").click(function (e)
    {
        $(this).next().slideToggle('fast');
    });

});

Answer 2

未经测试但请尝试：

$("div.MoreResultsTrigger").click(function (e)
    {
        $(this).next().slideToggle('fast');
    });

Answer 3

使用$(this).next().slideToggle('fast');将其仅应用于您选择的那个。目前它将slideToggle应用于所有div.MoreResultsTrigger的。

Answer 4

试试这个：

jQuery(document).ready(function ($) {

    $("div.MoreResultsTrigger").click(function()
    {
        $(this).next('.toggleable').slideToggle('fast');
    });

});

将'.toggleable'类添加到.next（）以防万一你可能还有其他东西，你不想切换。您当然必须将.toggleable类添加到您有兴趣切换的所有元素。当然，您可以替换，并且应该使用具有更多含义的名称替换toggleable。