为什么只有在设置了overflow:hidden;之后才出现JS动画？代码在内部

<!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>
黄志明
浏览 1452回答 1
1回答

随时随地看视频慕课网APP