javascript - 水平下拉菜单鼠标悬停问题

Question

在网上搜索了几个小时后，我决定为水平下拉菜单编写自己的代码，允许下拉菜单中包含 html 内容，而不是每个人都使用的标准“列表”项。与我发现的大多数下拉菜单相比，我的代码很少。有两个问题让我抓狂。

问题#1:当您将鼠标悬停在类别上时，“下拉”div 会按其应有的方式显示，但是当您将鼠标悬停在“下拉”div 上时，它会消失。但是，如果您将鼠标悬停在另一个类别上，“下拉”div 就会消失，并且新的 div 将按其应有的方式显示。我错过了什么？

问题#2:如果将光标停在类别下划线链接出现的位置并将其留在那里，“下拉”div 会弹出两次，从而闪烁。也想不通吗？

我已经在这里发布了我的代码:http://jsfiddle.net/UXxL8/

非常感谢，我知道这可能是我忽略的简单事情。但当你盯着同一段代码看太久之后你就知道那是怎样的了......

Answer 1

现在您正在将您的行为直接附加到 anchor 上。当您将鼠标向下移动到新显示的内容时，您已经超出了锚定区域，并且鼠标移开被触发。如果您将 anchor 和下拉菜单放置在同一个容器中，然后将事件附加到该容器，您将获得预期的行为。

我还建议使用 mouseenter 和 mouseleave 而不是 mouseover 和 mouseout，因为您的菜单中将包含子元素。这个question很好地描述了为什么这是可取的。

我设置了一个更新的 fiddle here 。类别 3 菜单项已更新。