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

【问题标题】：Jquery hover menu with orphaned sub-menu options带有孤立子菜单选项的 Jquery 悬停菜单
【发布时间】：2013-10-29 16:13:43
【问题描述】：

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

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

http://jsfiddle.net/dt8kz/

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

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

我试过了，但没有按预期工作。

谢谢，

艾伦。

【问题讨论】：

标签： jquery menu hover

【解决方案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();
}

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

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

    }
);

希望对你有帮助:)

【讨论】：

太棒了，谢谢你，我还没有尝试过你的解决方案，但有机会我会尝试的。感谢您的帮助！