Jquery子菜单，悬停动画问题

Question

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

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

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

知道为什么会这样吗？

非常感谢您的帮助！

jquery：

$(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);
        }
    });
});

HTML：

<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

您的问题是由在您离开或进入菜单元素时立即调用悬停动作引起的。

hoverIntent 插件是解决问题的一种可能方法

http://cherne.net/brian/resources/jquery.hoverIntent.html

关于第二个演示块的注意事项，即使将鼠标悬停在第二个块上，您也可以从第一个块跳到第三个块，而不会触发第二个块动作。

编辑：

<script type="text/javascript">
$(document).ready(function() {
    $('.default').show()
    $('#menu .menuitem').hover(
    function() {
        $('.banner').each(function() {
            $(this).stop(true,true).hide();
        })
        $('ul', this).show("slide", { direction: "left" }, 400);
    }, function() {
        $('ul', this).hide("slide", { direction: "left" }, 400);
        $('.default').delay(500).show("slide", { direction: "left" }, 400);
    });
});
</script>

我添加了一个默认值并稍微更改了一些类名，这并不是真正必要的，但我认为您可以弄清楚。

<div id="menu">
    <ul>
        <li class="menuitem"><a href="">Hvem</a>
            <ul class="banner">
                <li class="first-item"><a href="index.html">Submenu</a></li>
            </ul>
        </li>

        <li class="menuitem"><a href="">Hvad</a>
            <ul class="banner">
                <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="menuitem"><a href="">Hvordan</a>
            <ul class="banner default">
                <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="menuitem"><a href="">Sådan!</a></li>
    </ul>
    <div class="clear"><!--clearfix--></div> 
</div>

Jquery submenu, hover in/out animation problem