<!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>動畫菜單</title>
<style?type="text/css">
*?{?margin:?0;?padding:?0;?font-size:?14px;?}
a?{?color:?#333;?text-decoration:?none?}
ul{?list-style:?none;?}
.nav?{height:?30px;?border-bottom:?5px?solid?#F60;?margin-left:50px;?width:600px;}
.nav?li?{?float:?left;?position:relative;?height:30px;?width:120px?}
.nav?li?a?{?display:?block;?height:?30px;?text-align:?center;?line-height:?30px;?width:120px;?background:?#efefef;?margin-left:?1px;?}
.subNav{?position:absolute;?top:30px;?left:0;?width:120px;?height:0;?overflow:hidden}
.subNav?li?a{?background:#ddd?}
.subNav?li?a:hover{?background:#efefef}
</style>
<script>
window.onload=function(){
????var?aLi=document.getElementsByTagName('li');
for(var?i=0;?i<aLi.length;?i++){
aLi[i].onmouseover=function(){
????????????//鼠標(biāo)經(jīng)過一級菜單，二級菜單動畫下拉顯示出來
????var?This=this.getElementsByTagName('ul')[0];
????????clearInterval(lala)
???????var?lala=setInterval(function(){
????????????This.style.height=This.offsetHeight+16+"px";
????????????if(This.offsetHeight>=120){
????????????????clearInterval(lala);
????????????}
????????},30)
}
????????//鼠標(biāo)離開菜單，二級菜單動畫收縮起來。
aLi[i].onmouseout=function(){?????
?var?This=this.getElementsByTagName('ul')[0];
?????clearInterval(lala)
????????var?lala=setInterval(function(){
????????????This.style.height=This.offsetHeight-16+"px";
????????????if(This.offsetHeight<=0){
????????????????clearInterval(lala);
????????????}
????????},30)???
}
}
}
</script>
</head>
<body>
<ul?class="nav">
????<li><a?href="#">一級菜單</a>
???? <ul?class="subNav">
???????? <li><a?href="#">二級菜單</a></li>
????????????<li><a?href="#">二級菜單</a></li>
????????????<li><a?href="#">二級菜單</a></li>
????????????<li><a?href="#">二級菜單</a></li>
????????</ul>
????</li>
????<li><a?href="#">一級菜單</a>
???? <ul?class="subNav">
???????? <li><a?href="#">二級菜單</a></li>
????????????<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></li>
????<li><a?href="#">一級菜單</a></li>
</ul>
</body>
</html>我這里面對 ?setInterval的變量寫成lala 他就無法讓我選二級菜單,但是如果我這樣寫var This=this.getElementsByTagName('ul')[0];? ? ? ? clearInterval(This.time)? ? ? ? This.time=setInterval(function(){? ? ? ? ? ? This.style.height=This.offsetHeight+16+"px";? ? ? ? ? ? if(This.offsetHeight>=120){? ? ? ? ? ? ? ? clearInterval(This.time);? ? ? ? ? ? }? ? ? ? },30) }? ? ? ? //鼠標(biāo)離開菜單，二級菜單動畫收縮起來。 aLi[i].onmouseout=function(){ ? ?? var This=this.getElementsByTagName('ul')[0];? ? ?clearInterval(This.time)? ? ? ? This.time=setInterval(function(){? ? ? ? ? ? This.style.height=This.offsetHeight-16+"px";? ? ? ? ? ? if(This.offsetHeight<=0){? ? ? ? ? ? ? ? clearInterval(This.time);? ? ? ? ? ? }?},30) }}}寫成This.time就可以讓鼠標(biāo)在二級菜單上停留，而且不會縮回去，但是問題在于，This.time和lala一樣不都只是一個變量嗎？難道This.time有什么特殊含義？
請問為什么我這樣寫鼠標(biāo)滑到二級菜單，他就給我縮回去了，不都是變量名嗎？
慕仰6432972
2016-07-23 12:07:26
