<!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");如何优化有getByClassName()函数才能正常调用呢?此函数为保证document.getElementsByClassName兼容性的函数,具体在下面 var h= nav2s[i].offsetHeight; h+=1; if (h<=126) { nav2s[i].style.height = h+"px"; timer=setTimeout("AddH('"+i+"')",10); } else{ return; } } //二级菜单收回函数 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兼容性的函数 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="#">经典案例</a> <ul class="nav2"> <li><a href="#">Classic case</a></li> </ul> </li> <li><a href="#">联系我们</a> <ul class="nav2"> <li><a href="#">Contact us</a></li> </ul> </li> </ul> </div> </body> </html>
疑问一:最终结果表现在一级菜单鼠标的各个菜单快速划动时候,二级菜单会出现收不回去或者展不出来的情况,如何修复呢?
疑问二,代码中有一处不能再次调用即nav2s=nav7s[0].getByClassName("nav2")不可以,于是使用了原版的getElementsByClassName("nav2");如何优化有getByClassName()函数才能正常调用呢?此函数为保证document.getElementsByClassName兼容性的函数。
谢谢大家。
拖鞋_
慕的地8582982