在 JQuery 中延迟隐藏子菜单答案

【问题标题】：Hiding sub menu with delay in JQuery在 JQuery 中延迟隐藏子菜单
【发布时间】：2013-11-24 08:24:45
【问题描述】：

我有一个带有子菜单的菜单。当您单击菜单项时，子菜单将可见。当鼠标离开菜单时，子菜单会在 1 秒后隐藏。我想要的是，如果鼠标在 1 秒之前返回菜单隐藏功能终止。

这是我所做的：

HTML

<ul>
    <li><span>Item</span></li>
    <li><span>Item</span>
        <ul>
            <li><span>Item2</span></li>
            <li><span>Item2</span></li>
            <li><span>Item2</span></li>
            <li><span>Item2</span></li>
        </ul>
    </li>
    <li><span>Item</span></li>
    <li><span>Item</span>
        <ul>
            <li><span>Item3</span></li>
            <li><span>Item3</span></li>
            <li><span>Item3</span></li>
            <li><span>Item3</span></li>
        </ul>
    </li>
</ul>

CSS

body,htnl,ul{
    padding:0;
    margin:0;
}
ul {
    list-style:none;
    background:#ddd;
    overflow:hidden;
}
li{
    float:left;
    display:block;
    padding:3px 10px;
    margin:4px;
    background:#bbb;
}

ul ul{
    position:absolute;
    display:none;
    left:0;
}

jQuery

$("ul li").click(function(){
    $(this).find("ul").show();
}).parent().mouseleave(function(){
    setTimeout(function(){
        $("ul li").find("ul").hide();
    },1000);
}).parent().mouseenter(function(){
    $("ul li").stop(true,true);
});

【问题讨论】：

标签： javascript jquery html css menu

【解决方案1】：

您需要对超时有一些参考，以后可以使用它来取消：

var timeout;
$("ul li").click(function(){
    $(this).find("ul").show();
}).parent().mouseout(function(){
    clearTimeout(timeout)
    timeout = setTimeout(function(){
        $("ul li").find("ul").hide();
    },1000);
}).mouseover(function(){
    clearTimeout(timeout)
});

编辑： mouseover/out 而不是 mouseenter/leave 并且还在 mouseout 中添加了clearTimeout（有助于在 1000 毫秒内多次点击）

小提琴：http://jsfiddle.net/MnL6m/

【讨论】：

是的，尝试从 mouseenter 之前删除 parent()
大声笑，jQuery 有用于此目的的本机方法$.delay()
你如何取消？您链接到的页面显示无法取消。

【解决方案2】：

这样写：

$("li ul").hide();

$("ul li").click(function(){
    $("li ul").hide();//added here
    $(this).find("ul").show();
}).parent().mouseleave(function(){......

Fiddle here.

【讨论】：

【解决方案3】：

将超时分配给一个变量并使用 clearTimeout。

var timeout;

$("ul li").click(function(){
    $(this).find("ul").show();
}).parent().mouseleave(function(){
    timeout = setTimeout(function(){
        $("ul li").find("ul").hide();
    },1000);
}).parent().mouseenter(function(){
    clearTimeout(timeout);
    $("ul li").stop(true,true);
});

【讨论】：