菜单关闭时向上滑动多个div

时间:2012-04-19 14:50:20

标签: jquery html css

我试图在JQ中创建一个单击链接的菜单,它会滑动切换菜单的显示。在菜单中,您可以直接链接到页面,然后展开显示另一个菜单的链接。到目前为止,我已经完成了这项工作:

http://www.eadata.co.uk/testing/test.html#

我现在要做的是当您点击顶部的链接并切换回来时我需要关闭所有展开的菜单。它目前只是部分工作,只是在切换时隐藏顶级子菜单。因此,当您将其切换回来时,菜单全部关闭。

我一直试图解决这个问题,但我仍在学习JQ。 PHP是我的事! :)

如果鼠标离开菜单区域,使用此菜单可以在设定的时间后切换回来吗?

1 个答案:

答案 0 :(得分:1)

首先尝试这个(版本ONE):

为你的所有nav-level-2提供一个不是ID的类(不要忘记你的CSS)。

$(".nav-level-2").slideUp('slow');

如果这样做无效,请使用:

您可以在jQuery中使用$('#nav-container').find('.nav-level-2')来获取此类的所有元素。有了这个你可以使用这个:

for(var i = 0; i < $('#nav-container').find('.nav-level-2').length; i++) {
    $('#nav-container').find('.nav-level-2').eq(i).slideUp('slow');
}

如果这样做无效,请使用:

提供所有nav-level-2唯一ID并将它们全部存储在一个数组中,并使用for循环关闭所有级别。如果他们关闭,他们就不会动画:

var levelarray = new Array('nav-level-2-a', 'nav-level-2-b', 'nav-level-2-c');
for(var i = 0; i < levelarray.length; i++) {
    $('#' + levelarray[i]).slideUp('slow');
}