javascript - 延迟隐藏下拉菜单

Question

感谢你们，我的菜单现在可以使用了，因为子菜单显示的时间足够长，用户可以将鼠标移到链接上。不幸的是，这并不完全正确。即使用户将鼠标悬停在子菜单上，子菜单也会关闭。我添加了下面的 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);

    };

});

Answer 1

您的 setTimeout 回调没有执行任何操作，您应该将代码放在回调函数中。setTimeout 与 sleep 不同。

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