jQuery的菜單和子菜單延遲

-2

我有一個子菜單系統，該系統是在jQuery中writtne。它工作的很好，但我希望在鼠標移出「頂層菜單」選項時隱藏子菜單選項會稍微延遲。這是爲了讓用戶有時間將鼠標懸停在子菜單上並選擇一個選項。目前，用戶有時會錯過進行子菜單選擇。jQuery的菜單和子菜單延遲

我創建了一個JS提琴在這裏：

http://jsfiddle.net/K2tub/2/

我想變更必須在90行提出：

$('ul.fixture-list').slideUp(10);

我一直在玩這個了近2個小時但無法讓子菜單隱藏被延遲。

在此先感謝，

Alan。

來源

2013-09-16 Alan A

或簡單地像$（'ul.fixture-list'）一樣添加.delay（）。delay（100）.slideUp（10）; [.delay（）]（http://api.jquery.com/delay/） – BuDen

@BuDen - 我已經嘗試過delay（）函數，但它不會延遲子菜單隱藏，而是延遲顯示子菜單...沒有任何意義！ –

看到demo

，並使用delay()

$('ul.fixture-list').delay(500).slideUp(10);

來源

2013-09-16 12:52:41

謝謝我試過使用延遲，但它不起作用。我想你的演示，如果你將鼠標懸停在「主選項4」，再用鼠標關閉「選項2」瞬間消失... –

但在鉻 –

工作我也使用鍍鉻，我認爲這個問題是由線路引起的67：'$（'ul.fixture-list'）。removeAttr（'style'）' - 這一行非常重要，因爲我必須重置以前顯示的子菜單的高度 - 例如高度。如果我註釋掉這一行的延遲對我的作品在Chrome –

我建議你使用hoverIntent插件：http://cherne.net/brian/resources/jquery.hoverIntent.minified.js

下面是一些文檔：http://cherne.net/brian/resources/jquery.hoverIntent.html

你最大的問題在這裏您的子菜單不包含在父菜單元素中，所以當您點擊時g到你的子菜單，'父'菜單調用'鼠標移出'事件並不會保持打開狀態。

這裏是如果你有一個子菜單由父菜單中的HTML包裝應該工作的一些例子：

http://jsfiddle.net/K2tub/22/

$('#nav').hoverIntent({ 
    over: function() { 
     $('ul', this).stop().slideDown(100); 
    }, 
    out: function() { 
     $('ul', this).stop().slideUp(10); 
     $('ul.fixture-list').removeAttr('style'); 
    }, 
    selector: 'li.matches', 
    timeout: 500, 
    interval: 10 
}); 

$('#nav li.matches li').hoverIntent({ 
    over: function() { 
     $('div.fixtures').empty(); 
     $('div.fixtures').prepend('<li>Optinon 2</li>'); 
     $('ul.fixture-list').slideDown(50); 
    }, 
    out: function() { 
     $('ul.fixture-list').slideUp(10); 
    }, 
    selector: 'a.leagueSelect', 
    timeout: 500, 
    interval: 100 
});

（對不起我的英文不好）

來源

2013-09-16 13:22:26 Oliboy50

@ Olibo50謝謝你，我已經測試你的小提琴，如果你把鼠標放在選項2-4子菜單出現和消失，所以它不太正常工作。子菜單選項應該消失，直到鼠標離開「主選項」菜單。 –

什麼是最令人費解的是爲什麼這條線導致延遲不起作用：$（'ul.fixture-list'）。removeAttr（'style'）; –

@AlanA是的，它不能正常工作。這就是爲什麼我建議你重建你的HTML。如果您的子菜單列表位於每個父菜單項內，這可能會更容易。 – Oliboy50

jQuery的菜單和子菜單延遲

回答

相關問題