带有setTimeout的jQuery下拉菜单不起作用

本文介绍了带有setTimeout的jQuery下拉菜单不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我知道这个问题已经被问了很多次，但是我不能让我的下拉菜单与我迄今为止所做的工作。如果我设置菜单延迟显示，没有setTimeout菜单工作正常，问题出现。任何人都可以看看并提出解决方案吗？我也试图在IE6中工作。

这是setTimeout的完整示例：
（bugged，not work correct，drop downs stuck stuck，延迟不被识别）

这里是一个没有setTimeout的工作版本

并且这里是一个代码副本：

 <！DOCTYPE html> 
< html class =no-js> 
< head> 
< meta charset =utf-8> 
 
< style> 
 body {margin：60px; font-family：sans-serif; font-size：12px;} 
 ul，ul ul {margin：0; padding：0;} 
 ul li {
 position：relative; 
 list-style-type：none; 
 padding：5px 0; 
 margin：0 10px; 
 cursor：pointer; 
 border-bottom：1px solid #ddd; 
显示：inline-block; 
 float：left; 
} 
 .submenu {
 background：#eee; 
显示：无; 
 position：absolute; 
 width：200px; 
顶部：25px; 
 left：0; 
 margin-left：-5px; 
} 
 .hover {
 display：block！important; 
} 
< / style> 
< / head> 
< body> 
 
< nav id =navigation> 
< ul> 
< li class =drop>选项1 
< div class =子菜单> 
< ul> 
< li> Lorem ipsum dolor sit amet，consectetuer adipiscing elit。< / li> 
< li> Aliquam tincidunt mauris eu risus。< / li> 
< li> Vestibulum auctor dapibus neque。< / li> 
< li> Lorem ipsum dolor sit amet，consectetuer adipiscing elit。< / li> 
< / ul> 
< / div> 
< / li> 
< li class =drop>选项2 
< div class =子菜单> 
< ul> 
< li> Lorem ipsum dolor sit amet，consectetuer adipiscing elit。< / li> 
< li> Aliquam tincidunt mauris eu risus。< / li> 
< li> Vestibulum auctor dapibus neque。< / li> 
< li> Lorem ipsum dolor sit amet，consectetuer adipiscing elit。< / li> 
< / ul> 
< / div> 
< / li> 
< / ul> 
< / nav> 
 
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js>< / script> 
 
< script> 
 
 $（document）.ready（function（）{
 
（function（）{
 
 var topNav = $（'＃navigation'） ，
 drop = topNav.find（'。drop'），
 myTimer; 
 
 drop.hover（function（）{
 obj = $（this）; 
 subMenu = obj.find（'。submenu'）; 
 subMenu.addClass（'hover'）; 
 clearTimeout（myTimer）; 
}，function（）{
 myTimer = setTimeout（function（）{
 subMenu.removeClass（'hover'）; 
}，300）; 
}）; 
 
}） ）; 
 
}）; 
 
 
 
< / script> 
 
< / body> 
< / html>

解决方案

我能够解决这个问题。演示此处

  var topNav = $（'＃navigation'），
 drop = topNav.find（'。drop'），
 myTimer ; 
 
 drop.hover（function（）{
 var obj = $（this）; 
 var subMenu = obj.find（'。submenu'）; 
 clearTimeout （myTimer）; 
 if（subMenu.hasClass（'hover'））{
 // do nothing 
} else {
 drop.find（'。submenu'）。removeClass （'hover'）; 
 subMenu.addClass（'hover'）; 
} 
}，function（）{
 myTimer = setTimeout（function（）{
 drop.find（'。submenu'）。removeClass（'hover'）; 
}，300）; 
}）;

I know this questions being asked many times already but I can not make my drop down menu work with what I have so far. The problem appears if I set delay for menu to show, without setTimeout the menu works just fine. Could anyone take a look and suggest the solution please? I am also trying that it works in IE6.

Here is the full example with setTimeout:http://jsbin.com/owoyon/1/ (bugged, does not work correct, drop downs get stuck, delay is not recognized)
here is a working version without setTimeouthttp://jsbin.com/isamay/1/

and here is a code copy:

<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">

<style>
    body {margin:60px; font-family: sans-serif; font-size:12px;}
    ul,ul ul {margin:0;padding:0;}
    ul li {
        position:relative;
        list-style-type: none;
        padding:5px 0;
        margin:0 10px;
        cursor:pointer;
        border-bottom:1px solid #ddd;
        display:inline-block;
        float:left;
    }
    .submenu {
        background:#eee;
        display:none;
        position:absolute;
        width:200px;
        top:25px;
        left:0;
        margin-left:-5px;
    }
    .hover {
        display:block !important;
    }
</style>
</head>
<body>

<nav id="navigation">
<ul>
    <li class="drop">Option 1
        <div class="submenu">
            <ul>
                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                <li>Aliquam tincidunt mauris eu risus.</li>
                <li>Vestibulum auctor dapibus neque.</li>
                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
            </ul>
        </div>
    </li>
    <li class="drop">Option 2
    <div class="submenu">
            <ul>
                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                <li>Aliquam tincidunt mauris eu risus.</li>
                <li>Vestibulum auctor dapibus neque.</li>
                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
            </ul>
        </div>
    </li>
</ul>
</nav>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script>

$(document).ready(function(){

    (function(){

        var topNav = $('#navigation'),
            drop = topNav.find('.drop'),
            myTimer;

        drop.hover(function(){
            obj = $(this);
            subMenu = obj.find('.submenu');
            subMenu.addClass('hover');
            clearTimeout(myTimer);
        },function(){
            myTimer = setTimeout(function(){
                subMenu.removeClass('hover');
            },300);
        });

    })();

});



</script>

</body>
</html>

解决方案

I was able to work it out. Demo here http://jsbin.com/owoyon/3/edit

var topNav = $('#navigation'),
    drop = topNav.find('.drop'),
    myTimer;

drop.hover(function () {
    var obj = $(this);
    var subMenu = obj.find('.submenu');
    clearTimeout(myTimer);
    if (subMenu.hasClass('hover')) {
        //do nothing
    } else {
        drop.find('.submenu').removeClass('hover');
        subMenu.addClass('hover');
    }
}, function () {
    myTimer = setTimeout(function () {
        drop.find('.submenu').removeClass('hover');
    }, 300);
});

这篇关于带有setTimeout的jQuery下拉菜单不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

stuck

带有setTimeout的jQuery下拉菜单不起作用

问题描述