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 Fiddle在这里：http://jsfiddle.net/5GeMd/

非常感谢提前SO！！Chris

Answer 1

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

示例：

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

这将解决您的问题。