jQuery 中的子菜单

Question

我正在用 jquery 制作一个菜单。你可以看到在 http://mywash.dk/testtest/index.html

的子菜单从一开始就显示（在“Hvordan”下方）是活动菜单，因此应该始终显示它（除非您将鼠标悬停在另一个菜单项上，在这种情况下，应该显示另一个子菜单。

它工作正常，但有 1 个烦人的错误。当您将鼠标悬停时 在显示应有的菜单之前快速显示和隐藏活动菜单，

Hvad”到“Hvem” ，

非常感谢您的帮助！

从“

$(document).ready(function() {

    $('#menu > ul > li:not(.inpath) ul').hide();
    $('#menu .inpath ul').show();
    $('#menu > ul > li:not(.inpath)').hover(
    function() {
        $('ul', this).show("slide", { direction: "left" }, 400);

        if($('#menu li.inpath ul').is(':visible') && $(this).not('#menu ul li')){
          $('#menu li.inpath ul').hide("slide", { direction: "left" }, 400);
        }


    }, function() {
        $('ul', this).hide("slide", { direction: "left" }, 400);

        if($('#menu li.inpath ul').is(':hidden') && $(this).not('#menu ul li')){
            $('#menu li.inpath ul').show("slide", { direction: "left" }, 400);
        }
    });
});

它

<div id="menu">

            <ul>

                <li class="test"><a href="">Hvem</a>
                <ul>
                    <li class="first-item"><a href="index.html">Submenu</a></li>
                    </ul>
                </li>
                <li class="test"><a href="">Hvad</a>
                    <ul>
                    <li class="first-item"><a href="index.html">Produkter</a></li>
                    <li class="activeitem"><a href="cases.html" >Leveringer</a></li>
                    </ul>
                </li>

                <li class="inpath test"><a href="">Hvordan</a>

                    <ul>

                        <li class="first-item"><a href="">Reklame</a></li>
                        <li><a href="">PR</a></li>
                        <li><a href="">Websites</a></li>
                        <li><a href="">Illustrationer</a></li>

                    </ul>

                </li>
                <li class="last-item test"><a href="">Sådan!</a></li>

            </ul>

            <div class="clear"><!--clearfix--></div>

        </div>

Answer 1

嗯，它确实如此，你告诉它什么。分解：

1. 主导航可见，子导航隐藏

2. 鼠标进入子导航：滚动离开主导航，滚动子导航

3. 鼠标再次离开子项：滚动离开子项，在主项中滚动

4. 鼠标进入另一个子项：滚动子项，滚动离开主项。 但是在此事件发生时，3. 的动画尚未完成。因此，新的动画只是堆叠在当前排队的顶部。

如何修复？

您需要取消主导航上的当前动画。让您的悬停函数看起来像这样：

function() {
    $('ul', this).show("slide", { direction: "left" }, 400);

    if($('#menu li.inpath ul').is(':visible') && $(this).not('#menu ul li')){
      $('#menu li.inpath ul').stop(true, true).hide("slide", { direction: "left" }, 400);
// ----------------------------^ stop all current animations and clear the queue
    }

}

或者您在输入时查询主队列的长度：

$('#menu li.inpath ul').queue().length > 0
// -> then stop

基本思想如下 在 jQuery 文档中，并在这个答案中进行了解释< /a>，也是。基本上，每次将动画放在 jQuery 对象上时，该动画都会排队并在所有当前运行的动画之后执行。

因此，如果鼠标进入导航点，您必须通过查看其队列长度来检查主导航现在是否处于运动状态。如果有堆积的动画，可以调用 .stop(true, true) 清空队列，并将元素设置为所有动画都已完成的状态（双真）。然后你可以隐藏它，并且没有动画会妨碍你。

如果它不在运动中，即如果它有一个空队列，并且并且如果它可见，（并且仅在这种情况下），您必须将其滑出视图。