Javascript 带有子LI元素的JQuery悬停效果

我对JavaScript非常陌生，更不用说JQuery了，尽管我一直在慢慢学习，但我遇到了一个悬停效果的问题。我正在使用一个名为lavalamp的插件，它给我带来了一些关于多维菜单的问题。我已经尝试过了。noLava没有成功，所以我决定在子UL层悬停时尝试隐藏跟踪LI元素，因为当dub层悬停时，跟踪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似乎不像有时被问到的那样

---

因此，非常感谢您的帮助。

您看到的问题存在于您在悬停函数中使用的JQuery选择器中。当您在unhover函数中使用li.backLava时，您告诉任何具有backLava类的列表项元素再次显示，这就是为什么当子菜单隐藏时，跟踪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();
    }
);

注意：这段代码没有经过测试，但应该可以工作，或者进行一些小的调整

编辑

---

我已经更新了代码，现在我已经看到了你的演示和你想要的。更新后的代码应该可以满足您的需要。

这里最好添加一个演示页面。这里显示的代码没有多大帮助！还有一个插件的链接也会很有用。我能推荐一下它的神奇之处吗？他们非常适合现场演示，因为他们是协作的，我们可以看到组成演示的html、css和JavaScript。嗨，大卫，时间很长了。因为我在stackoverflow看到你，因为我出去了一段时间，你过得怎么样？好的，谢谢你的回复，我决定把它上传到我的网络主机上。你可以看到它的行动在你会发现，如果你只选择第一层备份它将工作，因为它应该。。。但是在那之后就没有了，主JS文件是，lavalamp插件是，谢谢你的回复，很多都是有意义的。请注意，我已经左右左右左右操纵了这个代码，而这恰好是我决定放弃lol的时候。。。我还推测这是一个选择器问题，但我很快就会尝试你的方法。实际上，在仔细查看你的代码并尝试你的底层方法之后，我突然想到插件实际上是在第一个UL层中创建了li.backlava元素，而不是subs，如果这有意义的话，那么li元素所做的就是跟踪菜单项的悬停，然后跟随它。检查，因为看到它可能比试图解释它更好。。。一旦用户将鼠标悬停在子菜单上，问题就出现了。。li元素开始在窗口中显示的地方是的，我明白你的意思。我会调查一下，看看是否能再次更新我的答案。哇，终于。。非常感谢！这正是我需要思考的Java脚本类型，尽管它可以工作，但当我从主层返回时，跟踪器只会弹出，而不是在菜单项下。。。但这是可以忍受的，我对结果感到高兴。。。再次感谢您在继续玩它之后，当我在子菜单上快速悬停或鼠标移动时，它仍然感觉有点邋遢。有时追踪器不会再出现。。。编辑：tere可能是一个函数，比如说。。。如果菜单类中没有任何内容悬停以恢复正常？就像一个备份功能