jQuery增加了菜单导航的延迟，可用性

jQuery to add delay to menu navigation, usability

本文关键字：延迟 可用性 导航 增加 菜单 jQuery      更新时间：2023-09-26

类似于superfish中的内容，我用它为CSS菜单上的悬停效果添加了一点延迟。我想我会分享，看看是否有调整它的建议。

$('ul#nav li').hover(function(){
    var timer = $(this).data('timer');
    if(timer) clearTimeout(timer);
    $(this).addClass('over');
},function(){
    var li = $(this);
    li.data('timer', setTimeout(function(){ li.removeClass('over'); }, 500));
});

一些快速的想法/想法重新调整：

由于您有一个id选择器，因此直接将该选择器作为起点要高效得多。此外，查找子元素比将所有元素组合在一个选择器中更有效。

我也不会在你可以挂链的时候麻烦计时器，而是延迟。我不确定你想达到什么目的，所以我发布了下面的例子来简要说明你可以如何使用.delay。这是未经测试的，但基本上在添加菜单的课程出现之前，你已经有了很长的延迟，而在又一次长时间延迟后，当焦点丢失时，它就会被删除。您也可以使用slideDown和slideUp或fadeIn和fadeOut来获得良好的效果。

我还在添加类的部分添加了一个复选框，因为人们可以比给定的延迟更快地进出菜单。这可能需要更多的思考。

$('#nav').find('li')
.hover(function()
{
    if (!$(this).hasClass('over'))
    {
        $(this).delay(500).addClass('over');
    }
})
.blur(function()
{
    $(this).delay(500).removeClass('over');
});


ul#nav  {
	margin: 0;
	padding: 0;
}
ul#nav li  {
	display: inline;
	float: left;
	position: relative;
}
ul#nav li a  {
	display: block;
}
ul#nav li a:hover  {
}
ul#nav li ul  {
	display: none;
	position: absolute;
        padding: 0px;
        z-index: 100; /* if slider */
}
ul#nav li:hover ul  {
	display: block;
}
ul#nav li:hover ul li ul {
	display: none;
}
ul#nav li ul li:hover ul {
	display: block;
}
ul#nav li ul li  {
	clear: left;
}
ul#nav li ul li a  {
}

相关文章：