JavaScript 动画下拉菜单

Question

我正在尝试创建一个下拉菜单作为主菜单的子菜单。子菜单只是一个包含项目/链接的 div 元素。单击主菜单项时，子菜单会下拉并停留在那里。这很容易，但是如果光标离开子菜单，我希望子菜单向上滑动。换句话说，一个简单的“mouseout”事件。然而，似乎当光标进入子菜单内的一项时，会触发“mouseout”事件。这就是你想要的，但如果你考虑一下，因为光标确实离开了子菜单元素，即使它没有离开它的边界。但是，这确实会带来问题，因为我只希望在光标移出子菜单元素边界时触发事件。

真正归结为，一个 div 包含在另一个 div 中，如下所示：

----------------------------
|          DIV-1           |
|                          |
|      -------------       |
|      |           |       |
|      |   DIV-2   |       |   AREA OUTSIDE DIV-1
|      |           |       |
|      |           |       |
|      |           |       |
|      -------------       |
|                          |
|                          |
----------------------------

现在，有两件事可能会导致 DIV-1 触发“mouseout”事件：

1. 光标从 DIV-1 的边界内移动到这些边界之外的区域
2. 光标从 DIV-1 的边界内移动到 DIV-2 的区域

我的目标是能够将这两种情况彼此区分开来，但我还没有弄清楚如何。

有没有人能很好地解决这个问题？这似乎是一个足够常见的功能，所以一定有人解决了它。

Answer 1

http://users.tpg.com.au/j_birch/plugins/superfish/

Answer 2

由于来自子元素的鼠标悬停事件冒泡/传播到父元素，如果我走的是非图书馆路线，我会使用在子菜单 div 的 onmouseover 事件中取消的计时器：

var hideMenuTimer;
subMenuDiv.onmouseover = function () {
    window.clearTimeout(hideMenuTimer);
}
subMenuDiv.onmouseout = function (evt) {
    evt = evt || window.event;
    if ((evt.target || evt.srcElement).id == "subMenuDiv")
        hideMenuTimer = window.setTimeout(function () {
            subMenuDiv.style.display = "none";
        }, 300);
}

一个非常简单的例子，但它应该可以工作，提供子菜单 div 的所有子元素正确地将 onmouseover 事件冒泡到 subMenuDiv 元素，然后在轮询之前取消计时器。另外，我设置了 300 毫秒的超时时间，因为我认为最好有这种东西，这样如果你不小心将鼠标移出，你就有一个短窗口可以在鼠标隐藏之前让鼠标重新进入。如果您希望它立即隐藏，将其设置为 0ms 也应该可以正常工作。