0

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

问题 #1：当您将鼠标悬停在类别上时，“下拉” div 会按原样显示，但是当您将鼠标悬停在“下拉” div 上时，它会消失。但是，如果您将鼠标悬停在另一个类别上，“下拉” div 就会消失，而新的 div 会像它们一样出现。我错过了什么？

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

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

非常感谢，我知道这可能是我忽略的一些简单的事情。但是你知道在你盯着同一个代码太久之后是怎么回事......

4

2 回答 2

2

现在，您正在将您的行为直接附加到锚点上。当您将鼠标向下移动到新暴露的内容时，您已经超出了锚点区域并触发了鼠标移出。如果您将锚点和下拉列表都放在同一个容器中，然后将事件附加到该容器，您将获得预期的行为。

我还建议使用 mouseenter 和 mouseleave 而不是 mouseover 和 mouseout，因为您的菜单中会有子元素。这个问题很好地描述了为什么这样做是可取的。

我在这里设置了一个更新的小提琴。类别 3 菜单项已更新。

于 2012-09-21T02:40:24.880 回答
1

您还需要将 绑定mouseover/mouseout到下拉列表。下拉菜单闪烁的原因是因为动画功能排队 -在完成fadeIn后开始fadeOut，因此您需要stop在添加另一个动画之前先查看当前动画。

这是改进的代码。

于 2012-09-21T02:49:23.743 回答