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的菜单和子菜单延迟

回答

相关问题