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

Question

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

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

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

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

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

Answer 1

你不想做吗 show() 在 mouseenter 和 hide() 在 mouseleave?

Answer 2

而不是仅仅调用不带参数的toggle，你的鼠标事件处理程序可以在明确的布尔showOrHide值传递。通过true在toggle()例行mouseenter，并false在mouseleave。还是由其他的回答表明，只需使用show和hide。

Answer 3

当加载文档而不移动鼠标，无鼠标悬停动作进行直到移动鼠标切换。但我认为鼠标悬停被切换为鼠标的移动，事件，如果它已经“过度”的onLoad。

这段代码是什么？ 不管怎么说，我认为你的错误来自于鼠标移出未被触发，因为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; }