<!doctype?html>
<html>
<head>
<meta?charset="UTF-8">
<title>無標題文檔</title>
<style?type="text/css">
*{margin:?0;padding:0;font-size:?14px;font-family:?"microsoft?yahei"}
a{text-decoration:?none;color:?#000;}
ul{list-style:?none;}
.cleanfix:after{content:?"";display:?block;height:?0;width:?0;clear:?both;overflow:?hidden;visibility:?hidden}
.cleanfix{zoom:1}
.nav7{width:?800px;margin:?0?auto;height:?40px;line-height:?40px;text-align:?center;background-color:?#DEDEDE;}
.nav7>ul>li{float:?left;position:?relative;}
.nav7?ul?li?a:hover{background-color:?#93C6CC;color:?#fff;}
.nav2{display:?none;position:?absolute;left:0;top:40px;}
.nav2?li{margin-top:?2px;background-color:#DEDEDE;}
.nav7?ul?li?a{width:?100px;display:?block}
ul?li?a{overflow:?hidden}
.nav7?.nav2{height:?0px;overflow:?hidden}
</style>
<script?type="text/javascript">
window.onload=function(){
var?nav7s=getByClassName("nav7"),
timer,
nav2s=nav7s[0].getElementsByClassName("nav2");
for(var?i=0;0<nav2s.length;i++){
????????!function(i){nav2s[i].parentNode.onmouseenter=function(){nav2s[i].style.display="block";AddH(i)};}(i);
????????!function(i){nav2s[i].parentNode.onmouseleave=function(){SubH(i)};}(i);
}
}
//二級菜單展開
???function?AddH?(i)?{
????????????var?nav7s=getByClassName("nav7"),
????nav2s=nav7s[0].getElementsByClassName("nav2");//疑問二，這里不能再次調用getByClassName("nav2")，使用了原版的getElementsByClassName("nav2");如何優(yōu)化有getByClassName()函數(shù)才能正常調用呢？此函數(shù)為保證document.getElementsByClassName兼容性的函數(shù)，具體在下面
????????????var?h=?nav2s[i].offsetHeight;
????????????h+=1;
????????????if?(h<=126)?{
????????????????nav2s[i].style.height?=?h+"px";
????????????????timer=setTimeout("AddH('"+i+"')",10);
????????????}?else{
????????????????return;
????????????}
????????}
//二級菜單收回函數(shù)
function?SubH?(i)?{
????????????var?nav7s=getByClassName("nav7"),
???????????nav2s=nav7s[0].getElementsByClassName("nav2");
????????????var?h=?nav2s[i].offsetHeight;
??????????clearTimeout(timer);
????????????h-=1;
????????????if?(h>0)?{
????????????????nav2s[i].style.height?=?h+"px";
????????????????timer=setTimeout("SubH('"+i+"')",10);
????????????}?else{
????????????????return;
????????????}
?????????}
//保證document.getElementsByClassName兼容性的函數(shù)
function?getByClassName(classname){
????if(document.getElementsByClassName){
??????????????return?document.getElementsByClassName(classname);
?????????}else{
var?arr=[],
tags=document.getElementsByTagName("*");
for(var?i=0;i<tags.length;i++){
if(tags[i].className==classname)
{
arr.push(tags[i]);
}
}
return?arr;
}
}
</script>
<body>
<div?class="nav7">
<ul>
<li><a?href="#">首頁</a></li>
<li><a?href="#">課程大廳</a>
???<ul?class="nav2"?id="ddd">
?????<li><a?href="#">JavaScript11</a></li>
?????<li><a?href="#">jQuery22</a></li>
?????<li><a?href="#">CSS</a></li>
???</ul>
</li>
<li><a?href="#">學習中心</a>
???<ul?class="nav2">
?????<li><a?href="#">JavaScript</a></li>
?????<li><a?href="#">jQuery</a></li>
?????<li><a?href="#">CSS</a></li>
???</ul>
</li>
<li><a?href="#">經(jīng)典案例</a>
???<ul?class="nav2">
?????<li><a?href="#">Classic case</a></li>
???</ul>
</li>
<li><a?href="#">聯(lián)系我們</a>
???<ul?class="nav2">
?????<li><a?href="#">Contact us</a></li>
???</ul>
</li>
</ul>
</div>
</body>
</html>疑問一：最終結果表現(xiàn)在一級菜單鼠標的各個菜單快速劃動時候，二級菜單會出現(xiàn)收不回去或者展不出來的情況，如何修復呢？疑問二，代碼中有一處不能再次調用即nav2s=nav7s[0].getByClassName("nav2")不可以，于是使用了原版的getElementsByClassName("nav2");如何優(yōu)化有getByClassName()函數(shù)才能正常調用呢？此函數(shù)為保證document.getElementsByClassName兼容性的函數(shù)。謝謝大家。
鼠標快速劃動時有bug，導致二級菜單出不來或者收回不完整
慕仔4109264
2017-12-15 01:38:41
