鼠标快速划动时有bug，导致二级菜单出不来或者收回不完整
<!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兼容性的函数。
谢谢大家。
慕仔4109264浏览 1638回答 3
3回答
-
拖鞋_
虽然我么看代码 我个人感觉啊 是你代码不健壮导致你这两个动画是个互斥的动画 一个展开一个收起所以说呢 在其中一个没有执行完之前 另一个应该不能执行我感觉你问题出在这 -
慕的地8582982
https://www.imooc.com/wenda/detail/354861https://www.imooc.com/wenda/detail/355733https://www.imooc.com/wenda/detail/356364https://www.imooc.com/wenda/detail/384860https://www.imooc.com/wenda/detail/386529https://www.imooc.com/wenda/detail/381473https://www.imooc.com/wenda/detail/385815https://www.imooc.com/wenda/detail/348318https://www.imooc.com/wenda/detail/350709https://www.imooc.com/wenda/detail/334889https://www.imooc.com/wenda/detail/389721https://www.imooc.com/wenda/detail/403184https://www.imooc.com/wenda/detail/384389https://www.imooc.com/wenda/detail/342455https://www.imooc.com/wenda/detail/395472https://www.imooc.com/wenda/detail/378054https://www.imooc.com/wenda/detail/389203https://www.imooc.com/wenda/detail/385015https://www.imooc.com/wenda/detail/395024https://www.imooc.com/wenda/detail/382452https://www.imooc.com/wenda/detail/347258https://www.imooc.com/wenda/detail/362588https://www.imooc.com/wenda/detail/362588https://www.imooc.com/wenda/detail/384865https://www.imooc.com/wenda/detail/363216https://www.imooc.com/wenda/detail/344259https://www.imooc.com/wenda/detail/383561https://www.imooc.com/wenda/detail/386558https://www.imooc.com/wenda/detail/382441https://www.imooc.com/wenda/detail/356920https://www.imooc.com/wenda/detail/334967https://www.imooc.com/wenda/detail/363270https://www.imooc.com/wenda/detail/580109https://www.imooc.com/wenda/detail/363412https://www.imooc.com/wenda/detail/388379https://www.imooc.com/wenda/detail/381799https://www.imooc.com/wenda/detail/356532https://www.imooc.com/wenda/detail/385789https://www.imooc.com/wenda/detail/333801https://www.imooc.com/wenda/detail/356754https://www.imooc.com/wenda/detail/347030https://www.imooc.com/wenda/detail/340962https://www.imooc.com/wenda/detail/388595https://www.imooc.com/wenda/detail/333667https://www.imooc.com/wenda/detail/409313https://www.imooc.com/wenda/detail/388745https://www.imooc.com/wenda/detail/352121https://www.imooc.com/wenda/detail/390895https://www.imooc.com/wenda/detail/357153https://www.imooc.com/wenda/detail/424278https://www.imooc.com/wenda/detail/388397https://www.imooc.com/wenda/detail/387394https://www.imooc.com/wenda/detail/389963https://www.imooc.com/wenda/detail/384303https://www.imooc.com/wenda/detail/355001https://www.imooc.com/wenda/detail/377526https://www.imooc.com/wenda/detail/342005https://www.imooc.com/wenda/detail/441442https://www.imooc.com/wenda/detail/388720https://www.imooc.com/wenda/detail/408978https://www.imooc.com/wenda/detail/356847https://www.imooc.com/wenda/detail/357093https://www.imooc.com/wenda/detail/355375https://www.imooc.com/wenda/detail/386053https://www.imooc.com/wenda/detail/395137https://www.imooc.com/wenda/detail/362688https://www.imooc.com/wenda/detail/415440https://www.imooc.com/wenda/detail/381971https://www.imooc.com/wenda/detail/343775https://www.imooc.com/wenda/detail/341902https://www.imooc.com/wenda/detail/395722https://www.imooc.com/wenda/detail/383066https://www.imooc.com/wenda/detail/384313https://www.imooc.com/wenda/detail/352713https://www.imooc.com/wenda/detail/394349https://www.imooc.com/wenda/detail/377644https://www.imooc.com/wenda/detail/338228https://www.imooc.com/wenda/detail/338273https://www.imooc.com/wenda/detail/338272https://www.imooc.com/wenda/detail/338269
随时随地看视频慕课网APP
Html/CSS
JavaScript