具有子 LI 元素的 JQuery 悬停效果

Question

我对 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 似乎并不像有时要求的那样做。

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

Answer 1

您看到的问题在于您在悬停函数中使用的 JQuery 选择器。当您在“unhover”函数上使用“li.backLava”时，您是在告诉任何具有“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();
    }
);

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

编辑
既然我已经看到了您的演示和您想要的内容，我已经更新了代码。更新后的代码应该可以满足您的需求。