Question

感谢你们，我的菜单现在可用了，因为子菜单显示的时间足够长，用户可以将鼠标移到链接上。不幸的是，这不完全正确。即使用户鼠标悬停在子菜单上，子菜单也会关闭。我在下面添加了HTML代码以及修订后的js文件代码。我认为问题出现在$（'。myMenu＆gt; 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);

    };

});

Answer 1

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

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

Answer 2

尝试类似的东西。如果你切换隐藏，那么在隐藏之前它会延迟3秒。如果要显示的切换，$（'＃toggle-item'）将清除队列并显示该项目，

function toggle(show){

    if (show) {

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

    } else {

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

Answer 3

setTimeout命令的工作方式与此setTimeout(the function to execute, delay in milliseconds)

相同

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

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

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


    //place this in your <head> section
    function closeDropDownFunction() {
    $(this).find('ul').css('visibility', 'hidden');
    }

    //then place this wherever the timeout needs to be
    setTimeout(closeDropDownFunction(), 3000);

延迟下拉菜单隐藏

3 个答案: