当鼠标已经位于 onLoad 元素上方时，带有 .toggle() 的 jQuery MouseEnter 和 MouseOut 事件会反转？

Question

我有一个下拉菜单，可以很好地使用以下代码：

$('#menu ul li').mouseenter(function(){
    $(this).children(".dropdown").toggle();
}).mouseleave(function(){
    $(this).children(".dropdown").toggle();
});

这正如您所期望的那样。问题是，如果当 $(document).ready(function() 时，鼠标已经在 $('#menu ul li') 上 mouseenter { }) 被触发，切换会以相反的方式工作吗？

我怎样才能避免这种情况？

例如：http://screenr.com/wbd

Answer 1

您不想在 mouseenter 上执行 show() 并在 mouseleave 上执行 hide() 吗？

Answer 2

您的鼠标事件处理程序可以传入显式布尔 showOrHide 值，而不是仅调用不带参数的 toggle 。将 true 传递给 mouseenter 例程中的 toggle()，并在 mouseleave 中传递 false 。或者按照其他答案的建议进行操作，只需使用 show 和 hide 即可。

Answer 3

当您在不移动鼠标的情况下加载文档时，在移动鼠标之前不会切换鼠标悬停操作。但我认为鼠标悬停会随着鼠标移动而切换，如果它已经在 onLoad“上方”，则发生事件。

这段代码怎么样？
不管怎样，我认为你的错误来自于 mouseout 没有被切换，因为 JS 只检查每 x 毫秒，如果你移动得太快，它就会在不调用事件的情况下离开 div。

$('#menu ul li').mouseenter(function(){
    // hide all other divs
    $(".dropdown").hide(0);
    // show the div we want
    $(this).children(".dropdown").show(0);
}).mouseleave(function(){
    $(".dropdown").hide(0);
});

如果您不关心动画，那么使用 CSS 执行此操作始终比使用 JS 更好。

你需要像这样设置它：

<div id="menu">
    <ul>
        <li>
            Menu 1
            <div class="dropdown">Sub1</div>
            <div class="dropdown">Sub2</div>
        </li>
        <li>
            Menu 2
            <div class="dropdown">Sub1</div>
            <div class="dropdown">Sub2</div>
        </li>
    </ul>
</div>

CSS：

.dropdown { display: none; position: relative; }
#menu li:hover .dropdown { display: block; }