<!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兼容性的函数。谢谢大家。
3 回答
拖鞋_
TA贡献453条经验 获得超223个赞
虽然我么看代码
我个人感觉啊 是你代码不健壮导致
你这两个动画是个互斥的动画 一个展开一个收起
所以说呢 在其中一个没有执行完之前 另一个应该不能执行
我感觉你问题出在这
慕的地8582982
TA贡献446条经验 获得超0个赞
https://www.imooc.com/wenda/detail/354861
https://www.imooc.com/wenda/detail/355733
https://www.imooc.com/wenda/detail/356364
https://www.imooc.com/wenda/detail/384860
https://www.imooc.com/wenda/detail/386529
https://www.imooc.com/wenda/detail/381473
https://www.imooc.com/wenda/detail/385815
https://www.imooc.com/wenda/detail/348318
https://www.imooc.com/wenda/detail/350709
https://www.imooc.com/wenda/detail/334889
https://www.imooc.com/wenda/detail/389721
https://www.imooc.com/wenda/detail/403184
https://www.imooc.com/wenda/detail/384389
https://www.imooc.com/wenda/detail/342455
https://www.imooc.com/wenda/detail/395472
https://www.imooc.com/wenda/detail/378054
https://www.imooc.com/wenda/detail/389203
https://www.imooc.com/wenda/detail/385015
https://www.imooc.com/wenda/detail/395024
https://www.imooc.com/wenda/detail/382452
https://www.imooc.com/wenda/detail/347258
https://www.imooc.com/wenda/detail/362588
https://www.imooc.com/wenda/detail/362588
https://www.imooc.com/wenda/detail/384865
https://www.imooc.com/wenda/detail/363216
https://www.imooc.com/wenda/detail/344259
https://www.imooc.com/wenda/detail/383561
https://www.imooc.com/wenda/detail/386558
https://www.imooc.com/wenda/detail/382441
https://www.imooc.com/wenda/detail/356920
https://www.imooc.com/wenda/detail/334967
https://www.imooc.com/wenda/detail/363270
https://www.imooc.com/wenda/detail/580109
https://www.imooc.com/wenda/detail/363412
https://www.imooc.com/wenda/detail/388379
https://www.imooc.com/wenda/detail/381799
https://www.imooc.com/wenda/detail/356532
https://www.imooc.com/wenda/detail/385789
https://www.imooc.com/wenda/detail/333801
https://www.imooc.com/wenda/detail/356754
https://www.imooc.com/wenda/detail/347030
https://www.imooc.com/wenda/detail/340962
https://www.imooc.com/wenda/detail/388595
https://www.imooc.com/wenda/detail/333667
https://www.imooc.com/wenda/detail/409313
https://www.imooc.com/wenda/detail/388745
https://www.imooc.com/wenda/detail/352121
https://www.imooc.com/wenda/detail/390895
https://www.imooc.com/wenda/detail/357153
https://www.imooc.com/wenda/detail/424278
https://www.imooc.com/wenda/detail/388397
https://www.imooc.com/wenda/detail/387394
https://www.imooc.com/wenda/detail/389963
https://www.imooc.com/wenda/detail/384303
https://www.imooc.com/wenda/detail/355001
https://www.imooc.com/wenda/detail/377526
https://www.imooc.com/wenda/detail/342005
https://www.imooc.com/wenda/detail/441442
https://www.imooc.com/wenda/detail/388720
https://www.imooc.com/wenda/detail/408978
https://www.imooc.com/wenda/detail/356847
https://www.imooc.com/wenda/detail/357093
https://www.imooc.com/wenda/detail/355375
https://www.imooc.com/wenda/detail/386053
https://www.imooc.com/wenda/detail/395137
https://www.imooc.com/wenda/detail/362688
https://www.imooc.com/wenda/detail/415440
https://www.imooc.com/wenda/detail/381971
https://www.imooc.com/wenda/detail/343775
https://www.imooc.com/wenda/detail/341902
https://www.imooc.com/wenda/detail/395722
https://www.imooc.com/wenda/detail/383066
https://www.imooc.com/wenda/detail/384313
https://www.imooc.com/wenda/detail/352713
https://www.imooc.com/wenda/detail/394349
https://www.imooc.com/wenda/detail/377644
https://www.imooc.com/wenda/detail/338228
https://www.imooc.com/wenda/detail/338273
https://www.imooc.com/wenda/detail/338272
https://www.imooc.com/wenda/detail/338269
添加回答
举报
0/150
提交
取消