Question

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

我遇到的问题是，如果有人想从菜单选项“comp 4”中进行选择，则总和菜单消失得太快，因此选项是孤立的，无法选择。我为了演示目的而删除了所有选项，但你可以在这里看到问题：

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

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

我尝试了这个但是没有按预期工作。

谢谢，

艾伦。

Answer 1

我曾经做过这些技巧。

只是延迟不起作用，你需要完成的是一个定时器变量，还有一个状态，说明它是否正在盘旋。

它有点脏，但这是工作示例，我删除了一些无效的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();
}

然后On Hover，我们喜欢这个

$('#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');         

    }
);

希望有所帮助：）

带有孤立子菜单选项的Jquery悬停菜单

1 个答案: