带有setTimeout的jQuery下拉菜单不起作用 [英] jQuery dropdown menu with setTimeout does not work
本文介绍了带有setTimeout的jQuery下拉菜单不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
-
这是setTimeout的完整示例：
http://jsbin.com/owoyon/1/ （bugged，not work correct，drop downs stuck stuck，延迟不被识别） -
这里是一个没有setTimeout的工作版本
http://jsbin.com/isamay/1/
并且这里是一个代码副本：
<！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>
解决方案
我能够解决这个问题。演示此处 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）;
}）;
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 setTimeout http://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下拉菜单不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
