Question

我有一个非常基本的导航，有两个主菜单项。

当您悬停主菜单项1时，我切换＃sub-menu1的可见性。当您悬停主菜单项2时，我切换#sub-menu2的可见性。

像这样：

$(".wrapper .main #m li").mouseenter(function() {
    var that = $(this);
    var menu = that.attr("class");

    if(menu == "first") {
        $("#s1").css("display","block");
        $("#s2").css("display","none");
    }

    if(menu == "second") {
        $("#s1").css("display","none");
        $("#s2").css("display","block");
    }
});

我的问题：我只想在主菜单或子菜单离开时触发mouseleave。我的目标是悬停我的主菜单项，并能够在没有mouseleave触发的情况下将鼠标悬停在子菜单上。

这是我尝试过的：

$(".wrapper").mouseleave(function() {
    console.log("leave");

    $("#s1").css("display","none");
    $("#s2").css("display","none");
});

正如您所看到的，mouseleave触发主菜单离开的同一时刻。

http://jsfiddle.net/17krr02p/

HTML就是这样：

<div class="wrapper">
    <div class="main">
        <ul id="m">
            <li class="first">main 1</li>
            <li class="second">main 2</li>
        </ul>
    </div>
    <div class="sub">
        <ul id="s1">
            <li>sub 1-1</li>
            <li>sub 1-2</li>
            <li>sub 1-3</li>
        </ul>
        <ul id="s2">
            <li>sub 2-1</li>
            <li>sub 2-2</li>
            <li>sub 2-3</li>
        </ul>
    </div>
<div>

Answer 1

我做了一个工作fiddle -

首先你在CSS上遇到了一些问题：放置absolute定位会使元素“流出”;

然后解决你在mouseleave上遇到的问题，为了实现到达子菜单（因为你有差距），我应用了一点延迟。

只有在离开菜单包装器时才触发mouseleave

1 个答案: