Javascript 滑动菜单保持打开状态。 clearTimeout 没有按预期工作 - 你能帮帮我吗
<html>
<head>
<style>
#Menu1 {position:absolute;
top:-190px; left:150px;
font-size:15px;visibility:visible;
background-color:#D0BCFE;
width:114px;z-index:0;border-style:solid;
}
#Menu2 {position:absolute;
top:-190px; left:580px;
font-size:15px;visibility:visible;
background-color:#D0BCFE;
width:114px;z-index:0;border-style:solid;
}
#Menu3 {position:absolute;
top:-190px; left:1005px;
font-size:15px;visibility:visible;
background-color:#D0BCFE;
width:114px;z-index:0;border-style:solid;
}
TD.TDHREFMENUS{font-size:20;color:red;position:relative;z-index:0;background-color:#C4ABFE;border-style:solid;width:114px;}
</style>
<script>
var stopUp=null;
var stopDown=null;
var mov=-143;
var on;
function down(id){
if (!on){
on=true;
clearTimeout(stopUp)
stopUp=null;
}
var obj=document.getElementById(id)
obj.style.top=mov +"px";
if (mov <=27){
mov+=2;
stopDown=setTimeout(function (){ down(id) }, 20)
}
}
function up(id){
if (on){
on=false;
clearTimeout(stopDown)
stopDown=null;
}
var obj=document.getElementById(id)
obj.style.top=mov +"px";
if (mov >=-143){
mov-=2;
stopUp=setTimeout(function(){ up(id)}, 20);
}
}
</script>
</head>
<body leftmargin=0 marginwidth=0 topmargin=0 marginheight=0>
<div id="Menu1" onmouseover="down('Menu1')" onmouseout="up('Menu1')">
URL 1<br>
URL 2<br>
URL 3<br>
URL 4<br>
URL 5<br>
URL 6<br>
URL 7<br>
URL 8<br>
</div>
</div>
<div id="Menu2" onmouseover="down('Menu2')" onmouseout="up('Menu2')">
URL 1<br>
URL 2<br>
URL 3<br>
URL 4<br>
URL 5<br>
URL 6<br>
URL 7<br>
URL 8<br>
</div>
</div>
<div id="Menu3" onmouseover="down('Menu3')" onmouseout="up('Menu3')">
URL 1<br>
URL 2<br>
URL 3<br>
URL 4<br>
URL 5<br>
URL 6<br>
URL 7<br>
URL 8<br>
</div>
</div>
<TABLE cellSpacing=0 cellPadding=0 BORDER=1 WIDTH=100%>
<TBODY>
<TR>
<TD align=middle CLASS="TDHREFMENUS"><span onmouseover="down('Menu1')" onmouseout="up('Menu1')">MENU 1</span>
</TD>
<TD align=middle CLASS="TDHREFMENUS"><span onmouseover="down('Menu2')" onmouseout="up('Menu2')">MENU 2</span>
</TD>
<TD align=middle CLASS="TDHREFMENUS"><span onmouseover="down('Menu3')" onmouseout="up('Menu3')">MENU 3</span>
</TD>
</TR>
</TBODY>
</TABLE>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<html>
<head>编辑: 当我测试时，如果我将鼠标悬停在一个菜单上，它会工作，但如果我将鼠标快速移动到几个菜单上，第一个菜单会工作，但其他菜单也会停止。
菜单1 {position:absolute;
top:-190px; left:150px;
font-size:15px;visibility:visible;
background-color:#D0BCFE;
width:114px;z-index:0;border-style:solid;
}
菜单2 {position:absolute;
top:-190px; left:580px;
font-size:15px;visibility:visible;
background-color:#D0BCFE;
width:114px;z-index:0;border-style:solid;
}
菜单3 {position:absolute;
top:-190px; left:1005px;
font-size:15px;visibility:visible;
background-color:#D0BCFE;
width:114px;z-index:0;border-style:solid;
}
TD.TDHREFMENUS{font-size:20;color:red;position:relative;z-index:0;background-color:#C4ABFE;border-style:solid;width:114px;}
变种停止=空； var stopDown=空； 变量移动=-143； 打开； 函数向下(id){ 如果(!上){ 开=真； 清除超时(停止) 停止=空； } var obj=文档.getElementById(id) obj.style.top=mov +"px"; 如果(移动=-143){ 移动-=2； stopUp=setTimeout(函数(){ 向上(id)}，20)； } } 网址 1网址 2
网址 3
网址 4
网址 5
网址 6
网址 7
网址 8
网址 1
网址 2
网址 3
网址 4
网址 5
网址 6
网址 7
网址 8
网址 1
网址 2
网址 3
网址 4
网址 5
网址 6
网址 7
网址 8
菜单 1 菜单 2 菜单 3
最佳答案
你的 <div>不平衡。你有两个关闭 </div> s 用于每个打开的。
关于javascript - clearTimeout 没有按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4608657/