Question

我正在尝试使用javascript / jquery创建一个下拉菜单，但无法理解我的想法。

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

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

麻烦的是菜单项的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.

});

Answer 1

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

Answer 2

当“#menu LI＆gt; A”.mouseout触发时（和div.onmouseover触发时的clearTimeout），一个解决方案可能会启动超时;这样菜单也不会那么难用。

javascript下拉菜单问题

2 个答案: