0

我有一个简单的下拉菜单系统，当用户将鼠标悬停在下拉菜单中的一个选项上时，会出现一个带有更多可点击选项的子菜单。

我遇到的问题是，如果有人想从菜单选项“comp 4”中进行选择，则 sum-menu 消失得太快，因此该选项是孤立的，无法选择。出于演示目的，我已经剥离了所有选项，但您可以在此处看到问题：

http://jsfiddle.net/dt8kz/

我认为需要在第 23 行（jesfiddle）应用延迟：

,function(){
         $('ul.fixture-list').delay(100).slideUp(50);        
});

我试过这个，但它没有按预期工作。

谢谢，

艾伦。

4

1 回答 1

0

我以前经常做这些技巧。

只是延迟不起作用，您必须完成的是一个计时器变量以及一个状态，说明它是否被悬停。

它有点肮脏，但这是工作示例，我删除了一些无效的 html 并添加了更多功能。

http://jsfiddle.net/L48VL/1/

var hideTimer;
var Hovering = false;
    function HideFixture()
    {
        if(!Hovering)
        {
            $('#nav li.matches > ul').stop().slideUp(50);
            $('ul.fixture-list').slideUp(50);  
        }

    }
function ShowSub()
{
    clearTimeout(hideTimer); 
     $('.fixture-list').show();
}

然后在悬停时，我们这样做

$('#nav li').hover(
    function () {
        //show its submenu
         Hovering = true; 
        clearTimeout(hideTimer);
         $('#nav li.matches > ul.first').stop().slideDown(100);

    }, 
    function () {
        //hide its submenu
            Hovering = false; 
            hideTimer = setTimeout(HideFixture,300);   
        //$('ul.fixture-list').removeAttr('style');         

    }
);

希望能帮助到你 ：）

于 2013-10-30T11:44:19.423 回答