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/

非常感谢提前SO !! 克里斯

Answer 1

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

示例::

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

这将解决您的问题。

JS Dropdown菜单在高度切换时出错

1 个答案: