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内的元素。{1} }}

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

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

嵌套ul上的jQuery mouseleave

1 个答案: