Question

我正在尝试使用jQuery创建一个下拉菜单。

我已经开始工作，但问题是你仍然可以将鼠标悬停在新滑动的子滑块上。这会导致菜单在两者之间闪烁，因为mouseenter包含所有儿童元素。

我需要一些方法从子动画mouseenter移除ul，同时动画，然后在完成后恢复它。如果我将.slideUp(300, 'swing')更改为.css('display', 'none')，它会正常工作，但它会突然消失。

更新：我设置了一个链接，以便您可以看到效果。 http://samlester.net/nav/

我的HTML格式如下：

<nav id="main-nav">
    <ul>
        <li><a href="#" id="home" class="current">Home</a></li>
      <li>
           <a href="#">Page 1</a>
         <ul id="page1-subnav">
                <li><a href="#">Page 1-1</a></li>
                <li><a href="#">Page 1-2</a></li> 
            </ul>
        </li>
        <li><a href="#">Page 2</a></li>
    </ul>
</nav>

这是我到目前为止的JavaScript ......

$(document).ready(function() {

var nav = $("#main-nav");

nav.find("li").each(function() {
    if ($(this).find("ul").length > 0) {

        //show submenus on hover
        $(this).mouseenter(function() {
            $(this).find("ul").stop(true, true).slideDown(300, 'swing');
        });

        //hide submenus on exit
        $(this).mouseleave(function() {
            $(this).find("ul").stop(true, true).slideUp(300, 'swing');
        });
    }
});

});

谢谢，Sam

Answer 1

这是事件传播的经典案例。

试试这个：

//show submenus on hover
$(this).mouseenter(function(event) {
    event.stopPropagation();
    $(this).find("ul").stop(true, true).slideDown(300, 'swing');
});

//hide submenus on exit
$(this).mouseleave(function(event) {
    event.stopPropagation();
    $(this).find("ul").stop(true, true).slideUp(300, 'swing');
});

要使这种跨浏览器友好（IE HACK），您将需要使用此方法：

try
{
    // Normal browsers use this method from stopping an event from leaving a child dom node up the parent tree
    event.stopPropagation();
}
catch(err)
{
    // IE does it this way
    window.event.cancelBubble=true;
}

Answer 2

试试这个 - 与之前插入所有逻辑的概念相同。

HTML：

<nav id="main-nav">
    <ul>
        <li><a href="#" id="home" class="current">Home</a></li>
        <li>
            <a href="#">Page 1</a>
            <ul id="page1-subnav">
                <li><a href="#">Page 1-1</a></li>
                <li><a href="#">Page 1-2</a></li> 
            </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li>
            <a href="#">Page 3</a>
            <ul id="page3-subnav">
                <li><a href="#">Page 3-1</a></li>
                <li><a href="#">Page 3-2</a></li> 
            </ul>
        </li>
        <li>
            <a href="#">Page 4</a>
            <ul id="page4-subnav">
                <li><a href="#">Page 4-1</a></li>
                <li><a href="#">Page 4-2</a></li> 
            </ul>
        </li>
    </ul>
</nav>

CSS：

#main-nav ul li ul {display:none;}

JS：

$(document).ready(function() 
{
    var nav = $("#main-nav");

    nav.find("li").each(function() 
    {
        if ($(this).find("ul").length > 0) 
        {
            //show submenus on hover
            $(this).mouseenter(function(event) 
            {
                event.stopPropagation();

                if($(this).children('ul').data('interactive') !== false)
                {
                    $(this).children('ul').data('interactive',false);
                    $(this).find("ul").stop(true, true).slideDown(300, 'swing', function(){$(this).data('interactive',true)});
                }
            });

            //hide submenus on exit
            $(this).mouseleave(function(event)
            {
                event.stopPropagation();

                // No if statement here - force close on mouseleave
                $(this).children('ul').data('interactive',false);
                $(this).find("ul").stop(true, true).slideUp(300, 'swing', function(){$(this).data('interactive',true)});

            });
        }
    });
});

http://jsfiddle.net/JE8uH/1/

从元素中删除mouseenter然后恢复它（对于jQuery下拉导航）

2 个答案: