javascript - 滑动面板 .stop() 不适用于 $(this).next

Question

我有多个盒子，当鼠标悬停在滑动面板上时，应该滑出您悬停的盒子。我让它工作而滑动面板在面板上方时没有停止，可以在此处看到:

https://jsfiddle.net/r70nbL8t/3/

$('.clickable_div').mouseover( function(){
$(this).next('.nav_menu').slideDown();
})
$('.clickable_div').mouseleave( function(){
$(this).next('.nav_menu').slideUp();
});

但是当我停止时，面板不再滑动

https://jsfiddle.net/r70nbL8t/4/

$(".wrap").mouseover(function(){
$(this).next(".nav_menu").stop().slideDown("slow");
});
$(".wrap").mouseout(function(){
$(this).next('.nav_menu').slideUp();
});

我一定是做错了一些简单的事情。我们将不胜感激您的帮助。

Answer 1

当你执行$(this).next()返回元素p时，你应该使用find()函数

$(".wrap").mouseover(function(){
   $(this).find(".nav_menu").stop().slideDown("slow");
});

$(".wrap").mouseout(function(){
   $(this).find('.nav_menu').slideUp();
});

结果:https://jsfiddle.net/cmedina/r70nbL8t/5/