带有setTimeout的jQuery下拉菜单不起作用
我知道这个问题已被多次询问，但我无法让我的下拉菜单与我到目前为止的工作。 如果我设置延迟显示菜单，没有setTimeout菜单工作正常，则会出现问题。 有人可以看看并建议解决方案吗？ 我也在尝试它在IE6中工作。
-
以下是setTimeout的完整示例： http ： //jsbin.com/owoyon/1/ （有问题，无法正常工作，下拉卡住，无法识别延迟）
-
这是一个没有setTimeout http://jsbin.com/isamay/1/的工作版本
这是一个代码副本：
body {margin:60px; font-family: sans-serif; font-size:12px;} ul,ul ul {margin:0;padding:0;} ul li { position:relative; list-style-type: none; padding:5px 0; margin:0 10px; cursor:pointer; border-bottom:1px solid #ddd; display:inline-block; float:left; } .submenu { background:#eee; display:none; position:absolute; width:200px; top:25px; left:0; margin-left:-5px; } .hover { display:block !important; } $(document).ready(function(){ (function(){ var topNav = $('#navigation'), drop = topNav.find('.drop'), myTimer; drop.hover(function(){ obj = $(this); subMenu = obj.find('.submenu'); subMenu.addClass('hover'); clearTimeout(myTimer); },function(){ myTimer = setTimeout(function(){ subMenu.removeClass('hover'); },300); }); })(); }); 我能够解决它。 在这里演示http://jsbin.com/owoyon/3/edit
var topNav = $('#navigation'), drop = topNav.find('.drop'), myTimer; drop.hover(function () { var obj = $(this); var subMenu = obj.find('.submenu'); clearTimeout(myTimer); if (subMenu.hasClass('hover')) { //do nothing } else { drop.find('.submenu').removeClass('hover'); subMenu.addClass('hover'); } }, function () { myTimer = setTimeout(function () { drop.find('.submenu').removeClass('hover'); }, 300); });
我修改了你的JS代码并试试这个
var topNav = $('#navigation'), drop = topNav.find('.drop'), myTimer, subMenu; $('#navigation .drop').each(function(){ var obj = $(this); obj.hover(function(){ subMenu = obj.find('.submenu'); subMenu.addClass('hover'); },function(){ myTimer = setTimeout(function(){ obj.find('.submenu').removeClass('hover'); },300); }); })
演示： http ： //jsfiddle.net/bvhk2/1/