Javascript jQuery在运行下一步之前完全关闭打开的子菜单

当前，下面我的jQuery代码在其父菜单悬停时打开和关闭子菜单。但我唯一的问题是，当我将鼠标移到另一个顶级项目上时，打开的子菜单开始关闭，我现在悬停的项目的子菜单开始向下滑动，因此有两个子菜单部分打开，并且取决于鼠标所在的位置，它也会在两个子菜单之间闪烁

我如何才能做到只有在前一个子菜单关闭后才能打开新子菜单？理想情况下，我想要的效果是

---

查看此代码

HTML

---

您必须使用hover的回调函数在完成动画制作后触发某些内容

查看更新的小提琴。。 为了达到你想要的效果，请打乱时间安排

此外-更好地鉴定您的选择器。。列表项的内容将触发鼠标悬停事件

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?
});

---

闪烁是由css引起的，请尝试设置顶部：15px；到子菜单。。。比如：@nevermind:@A.Wolff以某种方式建议删除子菜单的top属性，这实际上要好得多

<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();   
    });
});

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?
});