jquery - JS下拉菜单在高度切换时出现错误

Question

我创建了一个扩展菜单，一切正常，但不是立即工作的子菜单show()；& hide(); 我想用.animate({height : toggle})

当菜单按钮在点击时触发时，这一切都很好，但显然客户端需要在悬停时触发它们。

这会导致菜单出错并重复触发操作。我尝试将触发器更改为 mouseenter 等，并将脚本从动作和回调拆分为两个单独的动作，但没有运气。我确信必须有一种简单的方法可以解除或延迟触发器，但真的很难解决这个问题。

$('li.tab-drop-down').hover(function(){
    $(this).find('.sub-menu').animate ({height: "toggle"}, 250);
    $(this).addClass("li-open");            
    $(this).find('a.tab-link').addClass("tab-drop-hover");
    $(this).find('span').addClass("open");          
    },
    function(){
    $(this).find('.sub-menu').animate ({height: "toggle"}, 0);
    $(this).removeClass("li-open");                     
    $(this).find('a.tab-link').removeClass("tab-drop-hover");
    $(this).find('span').removeClass("open");                       
    });
});

JS 小提琴在这里：http: //jsfiddle.net/5GeMd/

非常感谢提前！克里斯

Answer 1

使用jQuery.stop()来停止匹配元素上当前正在运行的动画。

例子 ：：

$('li.tab-drop-down').hover(function(){
    $(this).stop(true, true);
    //existing stuff
   },
   function(){
    $(this).stop(true, true);
    //existing stuff
   });
});

这将解决您的问题。