0

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

动画到可见状态时效果很好。我的问题是隐藏部分。每当鼠标离开顶层 li 时，它似乎都会触发 mouseleave。我认为 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>
4

1 回答 1

0

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

另外，我想你可能想要$(this).find('.menuDrop')而不是 just $('.menuDrop')，否则你会影响所有.menuDrop元素，而不仅仅是你悬停的元素li。

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

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

于 2011-05-16T23:06:22.137 回答