jQuery полностью закрывает открытое подменю перед запуском следующего

В настоящее время мой код jQuery ниже открывает и закрывает подменю, когда его родитель зависает. Но моя единственная проблема заключается в том, что когда я навожу курсор мыши на другой элемент верхнего уровня, открытое подменю начинает закрываться, а подменю для элемента, который я сейчас навел, начинает скользить вниз, поэтому частично открыто 2 подменю, и в зависимости от того, где находится мышь, оно заканчивается мигает между тоже.

Как мне добиться, чтобы новое подменю открывалось только после закрытия предыдущего? В идеале я хотел бы получить такой эффект, как здесь

jsFiddle

var sub_menu = $('.main-menu .sub-menu');//select all sub menus
$('.main-menu > ul > li').hover(function () {
    sub_menu.stop(true, true); //use stop on all submenus
    $(this).find('.sub-menu').slideDown('slow');
}, function () {
    sub_menu.stop(true, true);//use stop on all submenus
    $(this).find('.sub-menu').slideUp('slow');
});

javascript jquery jquery-hover jquery-slide-effects
person ngplayground    schedule 05.03.2014    source источник
comment
мерцание вызвано css, попробуйте установить top: 15px; в подменю... что-то вроде: jsfiddle.net/n3V4T/3   -  person sinisake    schedule 05.03.2014
comment
Как насчет удаления свойства top для подменю, как было предложено @nevermind: jsfiddle.net/n3V4T/4   -  person A. Wolff    schedule 05.03.2014
comment
@A.Wolff, так намного лучше. :)   -  person sinisake    schedule 05.03.2014

Ответы (2)


arrow_upward
0
arrow_downward

Вы должны использовать функцию обратного вызова при наведении, чтобы вызвать что-то после завершения анимации.

посмотрите свою обновленную скрипку. Пожалуйста, задайте тайминги/и т. д., чтобы получить желаемый эффект.

http://jsfiddle.net/n3V4T/6/

также - лучше уточните свои селекторы.. содержимое элементов списка вызовет наведение курсора мыши на события..

var sub_menu = $('.main-menu .sub-menu'); //select all sub menus
$('.main-menu > ul > li.menuItem').hover(function () {
$this = $(this);
if ($('.sub-menu:visible').size() > 0) {
    console.log('slidingup' + $('.sub-menu:visible').size());
    $('.sub-menu:visible').slideUp('slow', function () {
        $this.find('.sub-menu').slideDown('slow');
        console.log('done');
    });
} else {
    $this.find('.sub-menu').slideDown('slow');
}
}, function () {
//   sub_menu.stop(true, true);//use stop on all submenus
$(this).find('.sub-menu:visible').slideUp('slow');
//Do you need this?
});
person JF it    schedule 05.03.2014

arrow_upward
0
arrow_downward

Взгляните на этот код ...............

jsFiddle

HTML

<nav class="main-menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">List 1</a>
            <div class="sub-menu">
                <ul>
                    <li><a href="list">List</a></li>
                    <li><a href="list">List</a></li>
                    <li><a href="list">List</a></li>
                    <li><a href="list">List</a></li>
                    <li><a href="list">List</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#">List 2</a>
            <div class="sub-menu">
                <ul>
                    <li><a href="list">List</a></li>
                    <li><a href="list">List</a></li>
                    <li><a href="list">List</a></li>
                    <li><a href="list">List</a></li>
                    <li><a href="list">List</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

CSS
.main-menu {
    width: 100%;
}
.main-menu ul {
    float: left;
    position: relative;
    width: 100%;
}
.main-menu ul li {
    display: inline-block;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
.main-menu ul li .sub-menu {
    background: none repeat scroll 0 0 #F1F1F2;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
    display: none;
    left: 0;
    padding: 20px 10px;
    position: absolute;
    top: 16px;
}

Js

$(document).ready(function(){
    $(".main-menu ul:first li").mouseover(function(){
        if( $(this).find(".sub-menu").length > 0 ){
             $(this).find(".sub-menu").slideDown();   
        }
    }).mouseleave(function(){
        $(this).find(".sub-menu").slideUp();   
    });
    $(".sub-menu").mouseover(function(){
        $(this).slideDown();   
    }).mouseleave(function(){
        $(this).slideUp();   
    });
});
person Community    schedule 05.03.2014