Question

我使用的是responsive navigation menu，其中不包含下拉动画。

所以我用它来制作动画//

$(document).ready(function () {
$(".test").hover(function () {
    $(".sub-menu").slideToggle("slow", function () {});
    });
});

现在，当我将鼠标悬停在父项目上时，菜单会滑开，但是一旦我尝试将鼠标悬停在子项链接上，菜单就会关闭。

我做了一些研究，并尝试在.stop()之后添加$(".sub-menu")，但它仍然不起作用。

我的问题是，使用.stop()后，为什么子菜单在悬停后不会保持打开状态？

Here is a fiddle

Answer 1

您需要将悬停添加到父li，因为当您移动到子导航时，a上的悬停会被释放

HTML

<DIV ID="NXVI">

    <nav>

        <ul class="menu">

            <li><a href="/">FRONT</a></li>

            <li><a href="/about">ABOUT</a></li>

            <li class="contains-sub-menu"><a class="test" href="#">RESOURCES</a>
                <ul class="sub-menu">
                    <li><a href="/overlays">Overlays</a></li>
                    <li><a href="#">Packs</a>
                        <ul class="subb-menu">
                            <li><a href="/overlay-packs">Overlay Packs</a></li>
                            <li><a href="/texture-packs">Texture Packs</a></li>
                        </ul>
                    </li>
                    <li><a href="/pngs">Pngs</a></li>
                    <li><a href="/templates">Templates</a></li>
                    <li><a href="/textures">Textures</a></li>
                    <li><a href="/wallpaper">Wallpaper</a></li>
                </ul>
            </li>

            <li><a href="/credit">CREDIT</a></li>

            <li><a href="/requests">REQUESTS</a></li>

        </ul>

    </nav>

    <a id="touch-menu" class="mobile-menu" href="#">Menu</a>

</DIV>

JS

$(document).ready(function () {
    $(".contains-sub-menu").hover(function () {
        $(".sub-menu").stop().slideToggle("slow", function () {});
    });
});

更新小提琴：http://jsfiddle.net/Varinder/eyN5A/1/

Answer 2

试试这个，适合小提琴：


$(document).ready(function () {
    $(".test, .sub-menu").hover(function () {
        $(".sub-menu").stop().slideDown("slow");
    }, function() {
        $(".sub-menu").stop().slideUp("slow");
    });
});

更新小提琴： http://jsfiddle.net/72qp5/2/

在悬停父项后停止动画

我使用的是responsive navigation menu，其中不包含下拉动画。

2 个答案: