0

我对 JavaScript 很陌生，更不用说 JQuery，虽然我一直在慢慢学习它，但我遇到了悬停效果的问题。我正在使用一个名为 lavalamp 的插件，它给我带来了一段时间关于多维菜单的问题。我试过 .noLava 没有成功，所以我决定在子 UL 层悬停后尝试隐藏跟踪 LI 元素（因为当配音层悬停时，跟踪 LI 会跟随在不自然的地方）。

$(" #top_menu ul li ul").hover(function(){
        $('li.backLava').hide(300) 
    },
    function(){
        $('li.backLava').show(100) 
    }
);

一旦我将鼠标悬停在子菜单上，此代码就可以工作，但问题是当我转到另一个子菜单然后返回第一个子菜单时，跟踪 LI 将再次显示。此外，当我将子菜单悬停在页面上时，它有时不会显示回来。虽然在获得 JS 和 JQuery 技能的同时尝试做这个菜单是一种很好的体验。它现在开始变得不再是一个笑话，我在 PHP、CSS、HTML、C# 等方面都有技能。然而 JS 似乎并不像有时被问到的那样......

所以任何帮助将不胜感激谢谢。

4

1 回答 1

0

您看到的问题在于您在悬停函数中使用的 JQuery 选择器。当您使用"li.backLava"“unhover”功能时，您会告诉任何具有“backLava”类的列表项元素再次显示，这就是当子菜单隐藏时跟踪 LI 再次出现的原因。

为了让它按您的意愿工作，我们只需要改进您的代码以仅隐藏父跟踪 LI 元素。因此，不要仅仅使用"li.backLava"，而是使用更具体的东西：

$("#top_menu ul li ul").hover(
    function(){

        //Find this sub-menu's parent list, and hide the tracking LI.
        $($(this).parents("ul")[0]).children("li.backLava").hide();
    },
    function(){

        //Find this sub-menu's parent list, and show the tracking LI again.
        $($(this).parents("ul")[0]).children("li.backLava").show();
    }
);

注意：此代码未经测试，但它应该可以工作，或者进行一些小的调整。

编辑 我已经更新了代码，因为我已经看到了你的演示和你想要的东西。更新的代码应该做你想做的事。

于 2011-02-26T22:23:06.307 回答