JQuery悬停对儿童LI元素的影响

我对JavaScript非常陌生，更不用说JQuery了，尽管我一直在慢慢捡起它，但遇到了悬停效应的问题。我正在使用一个名为lavalamp的插件，它一直在给我一些关于多维菜单的问题。我尝试过没有成功的.noLava，所以我决定尝试隐藏子UL层被徘徊时跟踪LI元素（因为当配音层被徘徊时，跟踪LI会在不自然的地方跟踪）。JQuery悬停对儿童LI元素的影响

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

此代码的工作，一旦我将鼠标悬停在子菜单，但问题是，当我转到另一个子菜单，然后回到第一个子菜单，跟踪李会再次出现。当我将子菜单悬停在页面上时，它有时也不会显示。虽然试图做这个菜单是一个很好的经验，同时获得JS和JQuery的技能。它现在开始变得超越一个笑话，我有PHP，CSS，HTML，C＃等技能。但JS似乎并不像它有时被问到什么。

所以任何帮助将非常感谢。

来源

2011-02-26 Edhen

演示页面将是一个很好的补充。这里显示的代码并没有太多帮助！此外，该插件的链接将很有用。 –

我可以推荐[JS小提琴]（http://jsfiddle.net/）和[JS Bin]（http://jsbin.com/）的奇迹吗？他们非常适合现场演示，因为他们是合作的，我们可以看到组成演示的html，css和JavaScript。 –

嗨大卫，很长一段时间。因为我已经看到你在计算器中，因为我出去了一段时间，你怎么样？ – kobe

您看到的问题存在于您在悬停函数中使用的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(); 
    } 
);

注：此代码没有进行测试，但它应该工作，或有一些小的调整工作。

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

来源

2011-02-26 22:23:06

感谢您的回复，而且它的确很有道理。请注意，我已经操纵了这个代码左右对中，而那恰好是我确定我放弃了哈哈......我也收集到了这是一个选择器问题，但我会很快尝试你的方法。 – Edhen

实际上，在更多地查看你的代码并尝试你的底部方法之后，它刚刚向我发现插件实际上在第一个UL层中创建了一个li.backlava元素，而不是子元素（如果有意义的话）确实跟踪菜单项的悬停，然后跟踪它。 [链接]（http://www.td3network.com/example/index.php）检查，看看它可能比尝试解释它更好...一旦用户悬停在子菜单上的问题在于..那里的元素开始在窗口中的奇怪位置显示 – Edhen

是的，我明白你的意思了。我会研究它，看看我能否再次更新我的答案。 –

JQuery悬停对儿童LI元素的影响

回答

相关问题