jQuery slideDown和slideUp子菜单

Question

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

jsBin演示

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

当用户输入带有子菜单的菜单项时，必须显示它，这是起作用的部分。

当用户离开菜单项并转到子菜单项时，它仍然需要可见。 我试图用setTimeout函数捕获此问题，该函数将在1500ms之后删除（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 -->

JS：

$(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

在显示新的.submenu元素之前，您只需要隐藏它们即可。 我尝试了2种不同的方法-使用hide（）和使用slideUp（）。 我个人更喜欢此jsfiddle中所示的slideUp（）方法。

http://jsfiddle.net/DgqS4/

Answer 2

当显示子菜单时，向其添加诸如submenu-open class ，如有必要，它将用于查找和隐藏它。
悬停功能代码：

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

这应该可以轻松解决您的问题，并在jsBin演示中对其进行了测试！

Answer 3

代替使用计时器，使用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 4

不太确定您是否接受此解决方案，但是我建议您对HTML进行一些更改，原因是无论如何您都在创建子菜单div，如果我正确理解了您的问题，那么您不希望页面内容移动，即您可以在主菜单下方的子菜单中设置特定的高度（在您的情况下应为30px）。

这是我建议的解决方案，希望对您有所帮助，

HTML：

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>DEMO</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>



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

</body>
</html>

CSS：

article, aside, figure, footer, header, hgroup, 
      menu, nav, section { display: block; }
      #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;
            position: absolute;
            left: 0;
    }
    .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 !important;
    }

JS：

$(document).ready(function(){ 
    var openSubMenu;
    $('.mainMenuA').hover(function(){
          openSubMenu = $('.submenu', $(this));
          openSubMenu.css({height: '30px'});
          openSubMenu.stop().slideDown();

    },function(){
          openSubMenu.stop().slideUp();
    });
});

注意：我已经在'li'元素内创建了子菜单div，因此我们不必将悬停事件写入子菜单div。 我将悬停事件分配给'li'元素本身，我还将在SlideDown之前将高度分配给子菜单，以避免动画中的竞态条件

这是工作示例http://jsbin.com/odegik/4/edit