使最後一個懸停的菜單項保持打開狀態

我有一個菜單，當懸停時，通過將.stick添加到子菜單並在mouseleave上刪除它來顯示當前懸停項目的subnav。如果沒有懸停在另一個菜單項上，我想讓最後一個懸停的菜單項在隱藏之前保持打開狀態2秒。使最後一個懸停的菜單項保持打開狀態

這是我的。我知道在容器上調用的mouseleave()將不起作用，因爲它位於ul#main-nav > li懸停函數的處理程序輸出之內，但是我已將它留給它以向您顯示我上次離開的位置。

$('ul#main-nav > li').hover(function() { 
    var $this = $(this); 
    clearTimeout(window.menustick); 
    $this.find('ul.submenu').addClass('stick'); 
}, function() { 
    var $this = $(this); 
    if($this.siblings().hover()) { 
     $this.find('ul.submenu').removeClass('stick'); 
    } else if ($('#main-nav').mouseleave()) { 
     window.menustick = setTimeout(function(){ 
      $this.find('ul.submenu').removeClass('stick'); 
     }, 2000); 
    } 
});

Here's the jsFiddle.

提前感謝！

來源

2013-07-31 Mikel

請提供[jsfiddle示例]（http：//jsfiddle.n et） – Dom

Hi @Dom，[這是JS小提琴。]（http://jsfiddle.net/mikemiketm09/3F7bJ/）謝謝！ – Mikel

我已更新JS小提琴，請查看http://jsfiddle.net/3F7bJ/1/ –

您的腳本和CSS有幾個問題。

首先，你的CSS有以下規則：

nav ul#main-nav li:hover > ul.submenu { 
    display: block; 
}

這需要修改：

nav ul#main-nav li > ul.submenu.stick { 
    display: block; 
}

這意味着你的CSS被控制的知名度而不是類「大棒」。

正如您所提及的在腳本代碼中使用.hover()和.mouseleave()不正確且不是必需的。至此，您已經在hover的mouseleave（handlerOut）中。

下面的代碼出現執行你正在尋找想要的效果：

var menuStickTimeoutId; 
$('ul#main-nav > li').hover(function() { 
    var $this = $(this); 
    clearTimeout(menuStickTimeoutId); 
    $('#main-nav ul.submenu').removeClass('stick'); 
    $this.find('ul.submenu').addClass('stick'); 
}, function() { 
    var $this = $(this); 
    clearTimeout(menuStickTimeoutId); 
    menuStickTimeoutId = setTimeout(function() { 
     $this.find('ul.submenu').removeClass('stick'); 
    }, 2000); 
});

工作演示： http://jsfiddle.net/3F7bJ/2/

來源

2013-08-01 05:05:44 JonWarnerNet

JS：

$("ul#main-nav > li").hover(
    function(){ 
     $(this).children('ul').hide().fadeIn(500); 
    }, 
    function() { 
     $('ul.submenu', this).fadeOut(2000);    
    });

小提琴：http://jsfiddle.net/3F7bJ/3/

來源

2013-08-01 05:05:54

使最後一個懸停的菜單項保持打開狀態

回答

相關問題