Question

我是JavaScript的新手，更不用说JQuery了，虽然我一直在慢慢地接受它但是我遇到了悬停效果的问题。我正在使用一个名为lavalamp的插件，它一直在给我一些关于多维菜单的问题。我试过.noLava没有成功，所以我决定尝试隐藏跟踪LI元素一旦子UL层悬停（因为配音层徘徊的那一刻跟踪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();
    }
);

注意：此代码未经过测试，但应该可以使用，或者进行一些微调。

修改我已经更新了代码，因为我已经看过你的演示和你想要的。更新的代码应该按照您的意愿执行。

JQuery悬停效果与儿童LI元素

1 个答案: