jQuery slideDown和slideUp子菜单

Question

jQuery函数slideUp和slideDown有一个小问题。

http://jsbin.com/odegik/edit#javascript,html,live

我有一个垂直菜单，下面有一个垂直子菜单。

当用户输入具有子菜单的菜单项时，必须显示该菜单项，这是正在工作的部分。

当用户离开菜单项并转到子菜单项时，它仍然需要是可见的。我试图用一个setTimeout函数来解决这个问题，该函数将在1500 to之后删除(slideUp)子菜单。如果用户在此期间将鼠标移动到子菜单，setTimeout将被清除(clearTimeout)。

但是当用户将鼠标快速移动到主菜单项上时，所有的子菜单都会被显示出来，原始页面中的内容也会被按下。

图片：http://i43.tinypic.com/5ww8yq.png

这是当我移动我的鼠标非常快在所有的主要菜单项。

应该如何:当用户将鼠标移动到主菜单项时，必须显示子菜单。当他移动到另一个主菜单项时，当前的子菜单必须是不可见的，另一个子菜单必须显示。

#menu
{
        background-color: white;
        width: 1000px;
        margin-top: 10px;
        height: 30px;
        position: relative;
}
#menu ul li
{
        float: left;
        display: inline;
        width: 125px;
        height: 30px;
        line-height: 30px;
        text-align: center;
}
#menu ul li.right { float: right; }
#menu ul li a
{
        top: 5px !important;
        text-decoration: none;
        font-size: 20px;
        height: 30px;
        color: #01224D;
}
.submenu
{

        background-color: #01224D;
        width: 1000px;
        height: 30px;
        color: white;
        display: none;
}
.submenu ul li
{
        display: inline;
        width: 100px;
        height: 30px;
        line-height: 30px;
        float: left;
        text-align: center;
}
.submenu ul li.right { float: right; }
.submenu ul li a
{
        text-decoration: none;
        font-size: 20px;
        height: 30px;
        color: white;
}

HTML：

<div id="menu">
        <ul>
                <li><a href="index.php">Home</a></li>
                <li>
                        <a class="mainMenuA" id="menu-1" href="#">Lederwaren</a>
                </li>
                <li><a class="mainMenuA" id="menu-2"  href="#">Tassen</a></li>
                <li><a class="mainMenuA" id="menu-3"  href="#">Koffers</a></li>
                <li><a class="mainMenuA" id="menu-4"  href="#">Kleding</a></li>
                <li><a class="mainMenuA" id="menu-5"  href="#">Accessoires</a></li>
                <li class="right"><a href="vestigingen.php">Vestigingen</a></li>
        </ul>
</div><!-- menu-->
<div class="submenu" id='submenu-1'>
        <ul>
                <li><a href="#">Submenu</a></li>
        </ul>
</div><!-- submenu -->
<div class="submenu" id='submenu-2'>
        <ul>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
        </ul>
</div><!-- submenu -->
<div class="submenu" id='submenu-3'>
        <ul>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
        </ul>
</div><!-- submenu -->
<div class="submenu" id='submenu-4'>
        <ul>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
        </ul>
</div><!-- submenu -->
<div class="submenu" id='submenu-5'>
        <ul>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
        </ul>
</div><!-- submenu -->

联署材料：

$(document).ready(function(){ 
                var timer;
                var hover;
                $('.mainMenuA').hover(
                    function()
                    {
                        var id = $(this).attr('id').split('-')[1];
                        $('#submenu-'+id).slideDown();
                    },
                    function()
                    {
                        var id = $(this).attr('id').split('-')[1];
                        timer = setTimeout(function() { $('#submenu-'+id).slideUp(); },1500);
                    }
                );
                $('.submenu').hover(
                    function()
                    {
                        clearTimeout(timer);
                    },
                    function()
                    {
                        var id = $(this).attr('id');
                        timer = setTimeout(function() { $('#'+id).slideUp(); },1500);
                    }
                );
            });

我希望有人能帮我。

Answer 1

不要使用计时器，而是使用stop函数来停止当前的动画

http://api.jquery.com/stop/

例如：

$('.mainMenuA').hover(function(){
      var id = $(this).attr('id').split('-')[1];
      $('#submenu-'+id).stop().slideDown();
},function(){
      var id = $(this).attr('id').split('-')[1];
      $('#submenu-'+id).stop().slideUp();
}); 

如果需要的话，使用stop的参数来获得最好的结果。

Answer 2

在显示新元素之前，只需隐藏显示的任何.submenu元素即可。我尝试了两种不同的方法--使用hide()和slideUp()。我个人更喜欢slideUp()方法，就像在这里看到的.

http://jsfiddle.net/DgqS4/

Answer 3

当您显示一个子菜单时，向它添加一个类似于class的submenu-open，这将用于在必要时查找和隐藏它。

在悬停时的功能代码：

$('.submenu-open').stop().hide().removeClass('submenu-open');
var id = $(this).attr('id').split('-')[1];
$('#submenu-'+id).addClass('submenu-open').slideDown();

这应该很容易解决您的问题，测试它在您的jsBin演示！