SlideOut后的下拉菜单截止 [英] Drop down menu cut-off after SlideOut

问题描述

我正在使用一个下拉菜单，我对其进行了修改，以使用onmouseover和onmouseout来使用诸如SlideOut和FadeIn之类的动画。
问题是在所有嵌套列表中徘徊了几次之后出现的，这导致第二个嵌套列表被切断。


您可以通过从 nav 1移动到 nav 2并再次快速返回来复制该错误。



链接到jsFiddle



截屏：


http://dl.dropbox.com/u/53879403/screenshot.png


请感谢您的任何建议/批评。

I'm using a drop-down-menu which I modified to use animations such as SlideOut and FadeIn using onmouseover and onmouseout. The problem comes after hovering through all of the nested lists a few times, which results in the second nested list becoming cut off.
You can replicate the bug by moving from "nav 1" to "nav 2" and back again rapidly.

Link to jsFiddle

Screenshot of cut-off:
http://dl.dropbox.com/u/53879403/screenshot.png
Please and thank you for any advice / criticism.

推荐答案

请参见以下小提琴： http://jsfiddle.net/SuRJ9/

我更改的代码：

function slideDown(toSlide) {
    currentHover(toSlide);
    $($(toSlide).children('ul')[0]).slideDown('medium',
        function(){   $(this).css('overflow','visible') });
}

我添加了重置溢出到可见完成动画后。 jQuery将溢出设置为隐藏以便制作滑动动画。

I've added resetting overflow to visible after finishing animation. overflow is set to hidden by jQuery in order to make sliding animation.

也请不要使用 onmouseout = slideUp（this） 和 onmouseover = slideDown（this） ，这是令人讨厌的JavaScript，是一项糟糕的技术。您应该使用jQuery分配这些事件。

Also, please don't use onmouseout="slideUp(this)" and onmouseover="slideDown(this)", this is obtrusive JavaScript and is a bad technique. You should assign these events using jQuery.

这篇关于SlideOut后的下拉菜单截止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！