javascript下拉菜单问题答案

【问题标题】：javascript drop down menu questionjavascript下拉菜单问题
【发布时间】：2009-09-04 03:36:34
【问题描述】：

我正在尝试使用 javascript/jquery 制作下拉菜单，但无法理解某些内容。

当您将鼠标悬停在菜单项上时，它需要在其下方显示一个包含另一个菜单的 div，这与许多 javascript 菜单类似。

我遇到的问题是，当您将鼠标移出菜单项时，div 需要消失，除非您已将鼠标移到 div 上，在这种情况下，div 需要保持在那里直到您滚开它。

问题是菜单项的 mouseout 事件在 div 的 mouseover 事件之前触发。

我想我想说的是，只有当您将鼠标移出覆盖菜单和 div 的区域时，div 才会消失。

这对任何人都有意义吗？（代码如下）

<ul id="menu">
    <li class="item1"><a href="#"></a></li>
    <li class="item2">
        <a href="#"></a>
        <div class="dropDownMenu">
            <div><a href="#">Sub-item 1</a></div>
            <div><a href="#">Sub-item 2</a></div>
            <div><a href="#">Sub-item 3</a></div>
        </div>
    </li>
    <li class="item3"><a href="#"></a></li>
</ul>


$('#menu LI > A').mouseover(function(){

    $(this).find('dropDownMenu').show();

});
$('#menu LI > A').mouseout(function(){

    $(this).find('dropDownMenu').hide();

    ^^^ Only do this if the user hasn't moved on to the drop down menu.

});

【问题讨论】：

标签： javascript jquery menu

【解决方案1】：

您可以使用mouseenter 代替鼠标悬停。

【讨论】：

这很神奇。我以前怎么从来没有注意到这一点？遗憾的是它不适用于 .live() 但仍然很棒，谢谢。

【解决方案2】：

一种解决方案可能是在“#menu LI > A”.mouseout 触发时开始超时（当 div.onmouseover 触发时为 clearTimeout）；这样菜单的使用难度也会降低。

【讨论】：