jQuery .next() 帮助答案

【问题标题】：Jquery .next() helpjQuery .next() 帮助
【发布时间】：2010-08-30 07:21:37
【问题描述】：

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

谢谢

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

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

});

使用悬停更新代码

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

【问题讨论】：

标签： javascript jquery

【解决方案1】：

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

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

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

});

【讨论】：

有附加问题。我已将代码更改为使用悬停，如果用户在框出现时将框本身悬停，则还需要框以保持显示。检查我的原始问题以获取更新的代码。
如果用户悬停触发器，那么它将显示下一个 div，即我的框。但是，如果用户随后将鼠标悬停在该框上，它将保持显示而不是消失，因为他们已经移除了触发器上的悬停。

【解决方案2】：

未经测试但尝试：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

试试这个：

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

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

});

将 '.toggleable' 类添加到 .next() 是为了以防万一您之间可能有其他不想切换的东西。您当然必须将 .toggleable 类添加到您有兴趣切换的所有元素中。当然，您可以并且应该将 toggleable 替换为更有意义的名称。

【讨论】：