Question

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

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

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

我该如何避免这种情况？

EG：http://screenr.com/wbd

Answer 1

您不希望show()上的mouseenter和hide()上的mouseleave吗？

Answer 2

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

Answer 3

在不移动鼠标的情况下加载文档时，在移动鼠标之前，不会切换鼠标悬停操作。但我认为当你的鼠标移动时，鼠标移开就会切换，如果已经“超过”onLoad就会发生事件。

这段代码怎么样？无论如何，我认为你的bug来自mouseout没有被切换，因为JS只检查每x ms，如果你移动得太快，它会离开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; }

当鼠标已经在元素onLoad上时，带有.toggle（）的jQuery MouseEnter和MouseOut事件会反转吗？

3 个答案: