嵌套ul上的jQuery mouseleave

Question

我正在整理一个包含嵌套ul的简单下拉列表。 当鼠标悬停在顶层li上时，我希望它动画到可见状态。 并且，当鼠标离开整个导航区域时，动画化为隐藏状态。

设置为可见状态时，它可以正常工作。 我的问题是隐藏的部分。 每当鼠标离开顶层li时，似乎就会触发mouseleave。 但是，除非我认为错误，否则我不应该对子元素执行此操作。

下面是代码。 任何帮助或见解表示赞赏。

$(document).ready(function() {

        //When mouse rolls over
        $('#mainNavBar li').mouseenter(function(){
            $('.menuDrop').stop().animate({height:'163px'},{ queue:false, duration:300, easing: 'easeInQuart'})
        });

        //When mouse is removed
        $('#mainNavBar li').mouseleave(function(){
            $('.menuDrop').stop().animate({height:'0px'},{ queue:false, duration:300, easing: 'easeOutQuart'})
        });

    });

和HTML

<ul id="mainNavBar">
                <li id="pos1"><a href="#"><span class="accesslinks">TOP 1</span></a>
                    <div class="menuDrop">
                        <ul class="products">
                            <li class="active">Product 1</li>
                            <li>Product 2</li>
                            <li>Product 3</li>
                            <li>Product 4</li>
                        </ul>
                        <ul class="tabs">
                            <li class="selected"><a href="#">Tab 1</a></li>
                            <li><a href="#">Tab 2</a></li>
                            <li><a href="#">Tab 3</a></li>
                            <li><a href="#">Tab 4</a></li>
                        </ul>
                    </div>
                </li>
                <li id="pos2"><a href="#"><span class="accesslinks">TOP 2</span></a>
                    <div class="menuDrop">
                        <ul class="products">
                            <li class="active">Product 5</li>
                            <li>Product 6</li>
                            <li>Product 7</li>
                            <li>product 8</li>
                        </ul>
                        <ul class="tabs">
                            <li class="selected"><a href="#">Tab 1</a></li>
                            <li><a href="#">Tab 2</a></li>
                            <li><a href="#">Tab 3</a></li>
                            <li><a href="#">Tab 4</a></li>
                        </ul>
                    </div>
                </li>
            </ul>

Answer 1

问题是， #mainNavBar li所有的比赛li内的元素#mainNavBar在任何级别。 这意味着它也与内部li元素匹配。 如果您希望仅在直接子级上发生，请将选择器更改为#mainNavBar > li 。

另外，我在想您可能需要$(this).find('.menuDrop')而不是$('.menuDrop') ，否则您将影响所有.menuDrop元素，而不仅限于悬停在内部的元素li 。

您可能还想尝试将鼠标悬停以简化代码。

http://api.jquery.com/hover/