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

StackOverflow https://stackoverflow.com/questions/2213155

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

$('#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

有帮助吗?

解决方案

你不想做吗 show()mouseenterhide()mouseleave?

其他提示

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

当加载文档而不移动鼠标,无鼠标悬停动作进行直到移动鼠标切换。但我认为鼠标悬停被切换为鼠标的移动,事件,如果它已经“过度”的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; }
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top