JQuery 导航 - 下拉导致问题答案

【问题标题】：JQuery Navigation - Dropdown Causing IssuesJQuery 导航 - 下拉导致问题
【发布时间】：2013-03-20 10:52:06
【问题描述】：

所以我目前正在尝试使用 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/

【问题讨论】：

标签： jquery drop-down-menu navigation hover

【解决方案1】：

你在#navigation 内的所有li 上都做了一个hoverIntent。这包括子项目因此，当您将鼠标悬停在 li 之外时，它会隐藏那个。

从

更改您的选择器

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

到

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

【讨论】：

【解决方案2】：

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

您可以通过更新 mouseout 处理程序来解决此问题，以在执行 mouseout 操作之前检查鼠标是否仍在子菜单中。

【讨论】：