offsetHeight報(bào)錯，只有重復(fù)觸發(fā)時下拉菜單才一點(diǎn)點(diǎn)出現(xiàn)
<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8">
<title>JS實(shí)現(xiàn)動畫菜單</title>
<style type="text/css">
.nav{
list-style-type:none;
font-size:12px;
font-weight:bold;
}
.navli{
float:left;
position:relative;
}
.navli a{
text-decoration:none;
display:block;
width:80px;
background:#eee;
line-height:20px;
color:#000;
text-align:center;
}
.navli a:hover{
color:#FFF;
background:#F00;
}
.navli ul{
list-style-type:none;
padding:0;
position:absolute;;
display:none;
height:0px;
overflow:hidden;
}
</style>
<script type="text/javascript" >
window.onload= function(){
var navli=document.getElementsByTagName("li");
for(i=0;i<navli.length;i++){
navli[i].onmouseover=function() {
var ulmenu=this.getElementsByTagName("ul")[0];
if(ulmenu !=undefined){
ulmenu.style.display="block";
Addh(ulmenu.id);
}
};
navli[i].onmouseout=function(){
//空
};
}
}
function Addh(id){
var ul=document.getElementById(id);
var h=ul.offsetHeight;
h =h+1;
if(h<=60){
ul.style.height=h+"px";
setTimeout("Addh(' " +id+" ')",10);
}
else{
return;
}
}
</script>
</head>
<body>
<ul>
<li><a href="#" >首頁</a></li>
<li><a href="#" >課程大廳+</a>
<ul id="lesson">
<li><a href="#" >前端開發(fā)</a> </li>
<li><a href="#" >手機(jī)開發(fā)</a></li>
<li><a href="#" >后端開發(fā)</a></li>
</ul>
</li>
<li><a href="#" >學(xué)習(xí)中心</a></li>
<li><a href="#" >關(guān)于我們</a></li>
</ul>
</body>
</html>
2016-02-02
遇到同樣的問題
2016-02-02
我已經(jīng)解決我的問題了，是setTimeout()字符串拼接有問題，我試了試你的代碼，發(fā)現(xiàn)你也是這里有問題。
你在拼接的時候加了空格，你賦值我下面的代碼，然后就ok了
setTimeout("Addh('"+id+"')",10);