jQuery向下滑动div – 在结束时消失

我在下滑菜单中做了一个选项。

我使用以下jQuery

$(document).ready(function() { $(".menu_item").hover(function() { $(".menu_options").slideDown(400); }, function() { $(".menu_options").slideUp(400); }); }); 

我遇到的问题是，当它向下滑动并继续向下滑动的div时它会消失 – 这是设置的屏幕截图

这个区域的HTML是

 
 
 Landlord Packages 
 
 
 Single Items 
 
  

预先感谢您的帮助 ：-）

JSFiddle脚本http://jsfiddle.net/pCTXq/

Answer 1

尝试

 $(document).ready(function() { $(".menu_item, .menu_options").hover(function() { $(".menu_options").stop(true, true).slideDown(400); }, function() { $(".menu_options").stop(true, true).delay(10).slideUp(400); }); }); 

这应该做你需要的。

我的小提琴： http ： //jsfiddle.net/MCvsd/54/

编辑：你提供的小提琴，更新： http ： //jsfiddle.net/pCTXq/1/

Answer 2

这里的问题是你在.menu_item上观看hover以.menu_item滑动.menu_options ，但由于.menu_options超出.menu_item ，将鼠标移动到.menu_options将隐藏它。

您可以通过在每个.menu_item div中嵌套.menu_options来解决此问题。 有一个JSfiddle或codepen（用你的css）解决这个问题会很好。

 
 
 Landlord Packages 
 
 
 Single Items 
 
  

Answer 3

嵌套是这样的，但如果你仍然不想使用嵌套，你可以做如下的事情

 $(document).ready(function() { $(".menu_item").hover(function() { $(".menu_options").slideDown(400); }); $(".menu_options").mouseleave(function () { $(".menu_options").slideUp(400); }); });