带有子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选择器中。 在"li.backLava"悬停”功能上使用"li.backLava"时，要告诉所有具有“ backLava”类的列表项元素再次显示，这就是为什么在隐藏子菜单时再次显示跟踪LI的原因。

为了使其按需工作，我们只需要优化代码以仅隐藏父级跟踪LI元素即可。 因此， "li.backLava"使用"li.backLava" ， "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();
    }
);

注意：此代码未经测试，但是可以正常工作，或进行一些小的调整。

编辑现在，我已经看过您的演示和所需内容，现在我更新了代码。 更新的代码应执行您想要的操作。