我有一个标准的嵌套无序列表设置,使用CSS设置样式并使用jQuery显示/隐藏,代码如下。
除此之外,我想在最后一级项目上添加隐藏延迟。由于第二个ul和最后一个ul之间的“连接”只有10个像素左右,你必须非常精确地移动鼠标才能使它工作而不能完全隐藏导航。
我如何A)向显示的第二级ul添加延迟并且B)从隐藏中向第三级ul添加延迟?我不是在谈论速度,而是增加了物理延迟。
这是我的代码:
$(function() {
$('ul.sub-menu').hide();
$('.sub-menu ul').hide();
$('#menu-navigation li').hover(function(){
$(this).children('ul').slideDown("fast");
},
function(){
$(this).children('ul').hide();
});
$('#menu-navigation ul li').hover(function(){
$(this).children('ul').slideDown("fast");
},
function(){
$(this).children('ul').hide();
});
});
答案 0 :(得分:1)
设置超时并将其保存到变量,以便您可以在需要时取消超时:
var second_lvl_timer;
$('#menu-navigation li').hover(function(){
var $this_hover_in = $(this);
second_lvl_timer = setTimeout(function () {
$this_hover_in.children('ul').slideDown("fast");
}, 500);
},
function(){
var $this_hover_out = $(this);
clearTimeout(second_lvl_timer);
$this_hover_out.children('ul').hide();
});
当您将鼠标悬停在#menu-navigation li
元素上时,这将调用超时,如果在调用计时器之前使用mouseout(在上例中为半秒),则会取消超时。
您可以为第三级做同样但倒退:
var third_lvl_timer;
$('#menu-navigation ul li').hover(function(){
var $this_hover_in = $(this);
clearTimeout(third_level_timer);
$this_hover_in.children('ul').slideDown("fast");
},
function(){
var $this_hover_out = $(this);
third_lvl_timer = setTimeout(function () {
$this_hover_out.children('ul').hide();
}, 500);
});
- UPDATE -
我通过将setTimeout匿名函数中的$(this)
语句更改为在hovering in / out中创建的变量来更新代码。这是一个jsfiddle:http://jsfiddle.net/hzPg4/。我注意到,由于第二级悬停不需要超时,如果您将鼠标悬停在整个列表中,则会立即向上滑动并隐藏第三级信息。
答案 1 :(得分:0)
对于第一个问题,您可以使用jquery延迟方法暂停队列一段时间,但就我现在而言,即使您不再处于悬停状态,后续方法仍将继续运行,因此这不会对您有所帮助。 / p>
对于第二个问题,我再次尝试在隐藏调用之前将延迟方法添加到队列中。
$('#menu-navigation li').hover(function(){
$(this).children('ul').slideDown("fast");
},
function(){
$(this).children('ul').delay(500).hide();
});