jquery - mouseover mouseout 在多个 ul 上不起作用动画

Question

有人知道如何使我的脚本适用于多个 ul 吗？

请看看我的 jsfiddle。
如您所见，该脚本仅适用于鼠标悬停时的第二个 ul。

提前谢谢你！
亲切的问候，
乔纳森

Answer 1

所以让我解释一下，发生了什么。你只选择了最后一个创建的 div，所以只有那个。

我必须找到选中.active的和选中的div

这是示例：

http://jsfiddle.net/JoshuaPack/YFUsJ/23/

在mouseover我将其添加到顶部以更改active和animationvars

    active = $(this).parent().find('.active');
    animation = $(this).parent().find('div');

在mouseout我添加了这个。

    active = $(this).find('.active');
    animation = $(this).find('div');

编辑： 对于将类移动active到其他对象的问题，您必须分别为每个类<li>附加以下示例：<div>.active

http://jsfiddle.net/JoshuaPack/YFUsJ/31/

我所做的是将动画变量包装成.each

$.each(active, function() {
    var animation = $('<div>').css({
        'position': 'absolute',
        'height': $(this).outerHeight()-1,
        'width': $(this).outerWidth(),
        'marginTop': ($(this).parent().index() * $(this).outerHeight()),
        'borderBottom': '1px solid #000',
        'z-index': -10
    });
    $(this).parent().parent().prepend(animation);
});

取而代之的是，或者在之前的<ul>类似内容之前，我对父级的父级进行了操作，该父级应该始终存在用于带有 class 的菜单active。