jsBin Demo 的

Question

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

jsBin Demo 的

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

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

当用户离开菜单项并转到子菜单项时，它仍然需要可见。这个问题我试图捕获一个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元素。我尝试了两种不同的方法 - 使用hide（）和使用slideUp（）。我个人更喜欢这个jsfiddle ....中看到的slideUp（）方法。

http://jsfiddle.net/DgqS4/

Answer 2

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

$('.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/

e：

$('.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，这样我们就不必将hover事件写入子菜单div。我正在将悬停事件分配给'li'元素本身，我还在slideDown之前为子菜单指定高度以避免动画中的竞争条件

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

jQuery slideDown和slideUp子菜单

jsBin Demo 的

4 个答案: