jQuery的菜单效果出了错

我寻求一种方式，以淡入列表排序导航子菜单，因为我希望它消失：jQuery的菜单效果出了错

总有一个活动菜单项 - 如果活动菜单项在子菜单中 - 也是活动菜单父项。因此，在初始化时，具有活动当前项目或当前父项目的子菜单应该可见。如果我悬停其他菜单项，其子菜单将淡入，活动的菜单将淡出。离开整个菜单后，活动子菜单再次淡入。另外，我使用jQuery插件hoverIntent（http://cherne.net/brian/resources/jquery.hoverIntent.html）为每个悬停操作提供超时。这是我到目前为止，但它确实是越野车。由于某些原因，子菜单有时会完全消失，当两个项目悬停而不离开导航时，两个子菜单重叠。有没有人有我的想法或提示？ =）请看这里的演示这里：http://jsfiddle.net/BQuPz/

来源

2011-05-12 Maxim Zubarev

这样的问题应该被自动标记尚未另一 - 毫无意义，下拉菜单感创建的 - 谷歌有6,770,000结果“jQuery的下拉菜单” – 2011-05-12 19:44:37

小提琴似乎非功能性 – Dpeif 2014-01-31 17:55:52

与CSS问题后：最好不要用display:none和opacity发挥自己，把它留给jQuery和使用适当的功能fadeIn()和。

而不是将display:block; float:left;放在菜单的<li>元素上，应该使用display:inline-block。如果你漂浮<li> s，这会有效地将它们从他们的父容器中撕下来，并使ul的大小保持为零，因此除非明确设置其大小，否则不可能听到事件mouseleave事件。

代码问题：在hoverIntent插件中，timeout可能不是您要查找的内容。超时会在一段时间后自动触发out事件。要延迟悬停效果，请改为使用sensitivity和interval。检查出documentation page。

如果您应用上述修复，则需要的唯一事件是hoverIntent的结束和主导航的mouseleave。 over事件在当前子菜单中淡入淡出其余部分，当用户悬停导航时，mouseleave淡入活动子菜单。看看你修改的jsfiddle演示：http://jsfiddle.net/BQuPz/4/

// Hide inactive ones 
$('#main-nav > li:not(.current-menu-parent) .sub-menu').hide(); 

// What to do when hovering over a menu item 
$("#main-nav > li").hoverIntent({ 
    over: function(){ 
     // Find the hovered menu's sub-menu 
     var $submenu = $(this).find('.sub-menu'); 

     // Stop the animation and fade out the other submenus 
     $('.sub-menu').not($submenu).stop(true,true).fadeOut(260); 

     // Fade in the current one 
     $submenu.fadeIn(260); 
    } 
}); 

// What to do when user leaves the navigation area 
$('#main-nav').mouseleave(function(){ 
    // Fade out all inactive submenus 
    $('#main-nav > li:not(.current-menu-parent) .sub-menu').fadeOut(260); 

    // Fade in the active one 
    $('.current-menu-parent .sub-menu').fadeIn(260); 
});

来源

2011-05-12 20:52:50 DarthJDG

而不是使用动画$(this).find("ul").animate({'opacity': '1'}, 250); 我会使用fadeIn和fadeout函数与回调。然后，你确定你的淡入动画开始淡出结束

element.fadeOut(250,function(){otherElement.fadeIn(250)})

来源

2011-05-12 20:07:30 Grooveek

jQuery的菜单效果出了错

回答

相关问题