JQuery Navigation - 下拉引发问题

时间:2013-03-20 10:52:07

标签: jquery drop-down-menu navigation hover

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

2 个答案:

答案 0 :(得分:1)

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

更改选择器
$('ul#navigation li').hoverIntent(function () {

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

答案 1 :(得分:0)

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

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