1

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

    };

});
4

3 回答 3

1

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

function closeSubMenu() {
    var ul = $(this).find('ul');
    setTimeout(function(){
        ul.css('visibility', 'hidden'); 
    }, 2000);
};
于 2012-08-27T02:36:54.817 回答
0

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

function toggle(show){

    if (show) {

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

    } else {

        $('#toggle-item').delay(3000);
    }
}
于 2012-08-27T02:42:12.663 回答
0

该setTimeout命令的工作原理是这样的setTimeout(the function to execute, delay in milliseconds)

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

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

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

    //把它放在你的 <head> 部分
    函数 closeDropDownFunction() {
    $(this).find('ul').css('visibility', 'hidden');
    }

    //然后把它放在需要超时的地方
    setTimeout(closeDropDownFunction(), 3000);
于 2012-08-27T02:53:29.607 回答