3

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

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

4

3 回答 3

2

你不想一直做show()下去吗？mouseenterhide()mouseleave

于 2010-02-06T13:02:59.827 回答
1

toggle您的鼠标事件处理程序不仅可以不带参数调用，还可以传入显式布尔showOrHide值。在例程中传递true给，然后在. 或者按照其他答案的建议进行操作，然后使用and 。toggle()mouseenterfalsemouseleaveshowhide

于 2010-02-06T13:04:01.620 回答
0

当您在不移动鼠标的情况下加载文档时，在您移动鼠标之前不会切换鼠标悬停动作。但我认为鼠标悬停会随着鼠标移动而切换，如果它已经“结束”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; }
于 2010-02-06T13:17:01.180 回答