<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>此代碼有BUG，在兩個li之間快速切換的時候會出現BUG</title>
<style?type="text/css">
ul{margin:0;?padding:0;}
#nav?{margin:0?auto;?width:900px;?height:40px;}
a?{text-decoration:none;padding:0?20px;?font:"微軟雅黑";?font-size:20px;?display:block;?width:90px;?height:40px;}
a:hover{background-color:#999999;?color:#FFFFFF;}
ul?{list-style:none;?}
ul?li?{float:left;?background-color:#CCCCCC;?height:40px;?line-height:40px;?text-align:center;?position:relative;?}
ul?li?ul?{display:none;?position:absolute;?height:?0;overflow:?hidden;}
ul?li?ul?li{float:none;?margin-top:2px;}
</style>
</head>
<body>
<div?id="nav">
<ul>
<li><a?href="#">首頁</a></li>
<li><a?href="#">第二個</a></li>
<li?><a?href="#">第三個</a>
<ul?id="one">
<li><a?href="#">下拉一</a></li>
<li><a?href="#">下拉二</a></li>
<li><a?href="#">下拉三</a></li>
</ul>
</li>
<li><a?href="#">第四個</a></li>
<li?><a?href="#">第五個</a>
<ul?id="two">
<li><a?href="#">下拉四</a></li>
<li><a?href="#">下拉五</a></li>
<li><a?href="#">下拉六</a></li>
</ul>
</li>
<li><a?href="#">第六個</a></li>
</ul>
</div>
<script?type="text/javascript">
window.onload?=?function?()?{
var?lis?=?document.getElementsByTagName("li");
for(var?i?=?0?;?i<lis.length;i++){
lis[i].onmouseover?=?function(){
var?u?=?this.getElementsByTagName("ul")[0];
if(u?!=?undefined){
u.style.display?=?"block";
AddH(u.id);
}
}
lis[i].onmouseout?=?function(){
var?u?=?this.getElementsByTagName("ul")[0];
if(u?!=?undefined){
//?u.style.display?=?"none";
SubH(u.id);
}
}
}
}
function?AddH(id){
var?ulList?=?document.getElementById(id);
var?h?=?ulList.offsetHeight;
h?+=?1;
if(h<=?132){
ulList.style.height=?h?+"px";
setTimeout("AddH('"?+?id?+?"')",10);
}
else{
return;
}
}
function?SubH(id){
var?ulList?=?document.getElementById(id);
var?h?=?ulList.offsetHeight;
h?-=?1;
if(h>=?0?){
ulList.style.height=?h?+"px";
setTimeout("SubH('"?+?id?+?"')",10);
}
else{
ulList.style.display?=?"none";
return;
}
}
</script>
</body>
</html>
為什么只有在設置了overflow:hidden;之后才出現JS動畫？代碼在內部
黃志明
2016-05-30 16:43:15