jQuery mouseleave на вложенном ul - PullRequest
Новая
       13

jQuery mouseleave на вложенном ul

0 голосов
/ 17 мая 2011

Я собираю простой выпадающий список, который содержит вложенные 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>

1 Ответ

0 голосов
/ 17 мая 2011

Проблема в том, что #mainNavBar li соответствует всем li элементам в #mainNavBar на любом уровне.Это означает, что он также соответствует внутренним элементам li.Если вы хотите, чтобы это происходило только по прямому назначению, измените ваш селектор на #mainNavBar > li.

Кроме того, я думаю, что вы, вероятно, захотите $(this).find('.menuDrop') вместо $('.menuDrop'), иначе вы затронете все .menuDrop элементов, а не только те, которые находятся в вашем помещении li.

Возможно, вы захотите попробовать hover, чтобы упростить ваш код.

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

...