延迟下拉菜单隐藏答案

【问题标题】：Delaying a drop down menu from hiding延迟下拉菜单隐藏
【发布时间】：2012-08-27 02:10:22
【问题描述】：

感谢你们，我的菜单现在可以使用，因为子菜单显示的时间足够长，用户可以将鼠标移到链接上。不幸的是，它并不完全正确。即使用户将鼠标悬停在子菜单上，它也会关闭。我已经添加了下面的 HTML 代码以及修改后的 js 文件代码。我认为问题出在 $('.myMenu > li').bind('mouseout', closeSubMenu);线。也许另一种选择是在调用 openSubMenu 函数后设置一个超时延迟，以便在子菜单隐藏之前至少给用户 8 秒左右的时间。这对我来说是一个可以接受的解决方案。

<!-- HTML menu code below -->
<ul class="myMenu">
<li class="menuHeader"><a href="#">Employees <img src="images/arrowdown.gif" alt="Employee Links" width="11" height="8" border="0"/></a>
<ul class="subMenu">
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
        <li><a href="#">Link4</a></li>     
    </ul></li>
</ul>       

<!-- js file code below -->
$(document).ready(function() {
    $('.myMenu > li').bind('mouseover', openSubMenu);
    $('.myMenu > li').bind('mouseout', closeSubMenu);

    function openSubMenu() {
        $(this).find('ul').css('visibility', 'visible');    
    };

    function closeSubMenu() {
        var ul = $(this).find('ul');
        setTimeout(function(){
        ul.css('visibility', 'hidden');}, 10000);

    };

});

【问题讨论】：

标签： javascript drop-down-menu settimeout

【解决方案1】：

你的setTimeout 回调什么也没做，你应该把代码放在回调函数中。 setTimeout 不像 sleep。

function closeSubMenu() {
    var ul = $(this).find('ul');
    setTimeout(function(){
        ul.css('visibility', 'hidden'); 
    }, 2000);
};

【讨论】：

谢谢！这解决了一个问题，但不幸产生了另一个问题。基本上，我的菜单不会保持打开足够长的时间让用户选择一个选项。我将 2000 毫秒更改为 10000 毫秒，但这在 IE8 中效果不佳。代码： $('.myMenu > li').bind('mouseout', closeSubMenu);即使用户的鼠标仍在子菜单上，也会关闭子菜单。

【解决方案2】：

尝试类似的方法。如果你切换到隐藏，那么它会在隐藏前延迟 3 秒。如果要显示切换， $('#toggle-item') 将清除队列并显示项目，

function toggle(show){

    if (show) {

        $('#toggle-item').stop().clearQueue().show();

    } else {

        $('#toggle-item').delay(3000);
    }
}

【讨论】：

【解决方案3】：

setTimeout 命令的作用类似于setTimeout(the function to execute, delay in milliseconds)

所以，这就是你需要做的：

setTimeout($(this).find('ul').css('visibility', 'hidden'),3000);

请注意，从$(this) 到'hidden') 是实际命令。如果这不起作用，请尝试以下方法：

//把它放在你的部分函数 closeDropDownFunction() { $(this).find('ul').css('visibility', 'hidden'); } //然后把它放在需要超时的地方 setTimeout(closeDropDownFunction(), 3000);

【讨论】：