Удалите указатель мыши из элемента, затем восстановите его (для раскрывающегося списка jQuery) - PullRequest
Новая
       25

Удалите указатель мыши из элемента, затем восстановите его (для раскрывающегося списка jQuery)

0 голосов
/ 03 июля 2011

Я пытаюсь создать выпадающее меню, используя jQuery.

У меня это работает, но проблема в том, что вы все еще можете зависать над субнавом, который выдвигается, пока новый скользит.Это приводит к тому, что меню между ними мигает, потому что mouseenter охватывает все дочерние элементы.

Мне нужен какой-то способ удалить mouseenter из subnav ul во время его анимации, а затем восстановить его один раз.это сделано.Он отлично работает, если я изменяю .slideUp(300, 'swing') на .css('display', 'none'), но затем он внезапно исчезает.

ОБНОВЛЕНИЕ: Я установил ссылку, чтобы вы могли видеть эффект.http://samlester.net/nav/

Мой HTML-код имеет следующий формат: 

<nav id="main-nav">
    <ul>
        <li><a href="#" id="home" class="current">Home</a></li>
      <li>
           <a href="#">Page 1</a>
         <ul id="page1-subnav">
                <li><a href="#">Page 1-1</a></li>
                <li><a href="#">Page 1-2</a></li> 
            </ul>
        </li>
        <li><a href="#">Page 2</a></li>
    </ul>
</nav>

и вот JavaScript, который у меня есть до сих пор ... 

$(document).ready(function() {

var nav = $("#main-nav");

nav.find("li").each(function() {
    if ($(this).find("ul").length > 0) {

        //show submenus on hover
        $(this).mouseenter(function() {
            $(this).find("ul").stop(true, true).slideDown(300, 'swing');
        });

        //hide submenus on exit
        $(this).mouseleave(function() {
            $(this).find("ul").stop(true, true).slideUp(300, 'swing');
        });
    }
});

});

Спасибо,Sam

Ответы [ 2 ]

1 голос
/ 03 июля 2011

Это классический случай распространения событий.

Попробуйте: 

//show submenus on hover
$(this).mouseenter(function(event) {
    event.stopPropagation();
    $(this).find("ul").stop(true, true).slideDown(300, 'swing');
});

//hide submenus on exit
$(this).mouseleave(function(event) {
    event.stopPropagation();
    $(this).find("ul").stop(true, true).slideUp(300, 'swing');
});

Чтобы сделать этот кросс-браузер дружественным (IE HACK), вы захотите использовать этот метод: 

try
{
    // Normal browsers use this method from stopping an event from leaving a child dom node up the parent tree
    event.stopPropagation();
}
catch(err)
{
    // IE does it this way
    window.event.cancelBubble=true;
}
0 голосов
/ 03 июля 2011

Попробуйте это - та же концепция, что и раньше со всей подключенной логикой.

HTML: 

<nav id="main-nav">
    <ul>
        <li><a href="#" id="home" class="current">Home</a></li>
        <li>
            <a href="#">Page 1</a>
            <ul id="page1-subnav">
                <li><a href="#">Page 1-1</a></li>
                <li><a href="#">Page 1-2</a></li> 
            </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li>
            <a href="#">Page 3</a>
            <ul id="page3-subnav">
                <li><a href="#">Page 3-1</a></li>
                <li><a href="#">Page 3-2</a></li> 
            </ul>
        </li>
        <li>
            <a href="#">Page 4</a>
            <ul id="page4-subnav">
                <li><a href="#">Page 4-1</a></li>
                <li><a href="#">Page 4-2</a></li> 
            </ul>
        </li>
    </ul>
</nav>

CSS: 

#main-nav ul li ul {display:none;}

JS: 

$(document).ready(function() 
{
    var nav = $("#main-nav");

    nav.find("li").each(function() 
    {
        if ($(this).find("ul").length > 0) 
        {
            //show submenus on hover
            $(this).mouseenter(function(event) 
            {
                event.stopPropagation();

                if($(this).children('ul').data('interactive') !== false)
                {
                    $(this).children('ul').data('interactive',false);
                    $(this).find("ul").stop(true, true).slideDown(300, 'swing', function(){$(this).data('interactive',true)});
                }
            });

            //hide submenus on exit
            $(this).mouseleave(function(event)
            {
                event.stopPropagation();

                // No if statement here - force close on mouseleave
                $(this).children('ul').data('interactive',false);
                $(this).find("ul").stop(true, true).slideUp(300, 'swing', function(){$(this).data('interactive',true)});

            });
        }
    });
});

http://jsfiddle.net/JE8uH/1/

...