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#mainNavBarli#mainNavBar > li

$(this).find('.menuDrop')また、単にではなく、おそらく必要だと思います$('.menuDrop')。そうしないと、ホバーされた要素だけでなく、すべての.menuDrop要素に影響を及ぼしますli。

また、コードを単純化するためにホバーを試してみることもできます。

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

于 2011-05-16T23:06:22.137 に答える