Question

所以我目前正在尝试使用JQuery，并且到目前为止导航工作正常。我来添加下拉菜单会导致问题，并且想知道是否有人能够理解原因。

HTML：

<ul id="navigation">
        <li id="first" onclick="window.location='index.html';"><span id="logo"></span><span class="navigation-text">Home</span></li>
        <li class="standard"><span class="gallery_icon"></span><span class="navigation-text">Gallery</span>
            <ul class="subnavigation">
                <li>Portfolio 1 Column</li>
                <li>Portfolio 2 Column</li>
            </ul>
        </li>
        <li class="standard"><span class="gallery_icon"></span><span class="navigation-text">Gallery</span></li>
        <li class="standard"><span class="gallery_icon"></span><span class="navigation-text">GalleryGallery123</span></li>
    </ul>

JQuery的：

<script type="text/javascript">
$(document).ready(function() {

    // On hover:
    $('#navigation li').hoverIntent(function () {
        width = $(this).children('span:nth-child(2)').width();
        text = $(this).children('span:nth-child(2)');          

        var newwidth = (width + 15) // Original width + 15px padding        
        text.filter(':not(:animated)').animate({"width":"1px"}, 0).show(); // Make the width 0px and make the element visible
        text.animate({"width":+newwidth+"px"}, 300); // Animate the width to the new size
        $(this).children('ul').slideDown('slow')

    },
    function () {
        text.animate({"width":"1px"}, 150); // Animate the width to 0px and hide the element
        text.animate({"width":+width+"px"}, 0);
        setTimeout(function() {
            $('#navigation li .navigation-text').hide();
        },100);
        $(this).children('.subnavigation').slideUp('slow');
    });

});

</script>

如果您将鼠标悬停在绿色条或任何不包含下拉列表的LI上，那么它可以正常工作。如果你再次这样做，它会打开和关闭并继续工作。但是，如果您将鼠标悬停在下拉列表并将其保持在该下拉列表的第一个LI上，则继续前进到父级关闭的第二个LI，最后以错误的大小结束，下拉列表的第一个LI隐藏其自身。

如果你玩它可能是最好的，所以你知道我在做什么，因为我不确定这有多大意义。

JFiddle：http://jsfiddle.net/5NcHk/ 直播：http://dev.evaske.com/Navigation/

Answer 1

您在li内的所有#navigation上创建了一个hoverIntent。这包括子项目所以，当你徘徊在li之外时，它会隐藏那个。

从

更改选择器

$('ul#navigation li').hoverIntent(function () {

到

$('ul#navigation > li').hoverIntent(function () {

Answer 2

您正在为导航中的所有li分配hoverIntent事件处理程序。当您从一个子菜单项移动到另一个子菜单项时，这会导致mouseout事件触发。如果您快速移动鼠标以不触发“Portfolio Link 1”上的事件并移动到第二个链接，它就可以正常工作。当您将鼠标悬停在链接1上然后链接2时，这只是一个问题。

您可以通过更新mouseout处理程序来检查这一点，以便在执行mouseout操作之前检查鼠标是否仍在子菜单中。

JQuery Navigation - 下拉引发问题

2 个答案: