0

目前我下面的 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');
});
4

2 回答 2

0

看看这段代码......

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();   
    });
});
于 2014-03-05T11:37:29.923 回答
0

您必须使用悬停的回调函数在完成动画后触发某些东西..

查看您更新的小提琴..请弄乱时间/等以获得您想要的效果。

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?
});
于 2014-03-05T11:38:39.053 回答