请帮我看看，这里存在的BUG，是什么情况？

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="new_file.css" />
		<script type="text/javascript" src="myjs.js" ></script>
	</head>
	<body>
		<div class="wrap">
			
			<div class="head">
				<ul>
					<li>前端</li>
					<li>后台</li>
					<li>手机</li>
					<li>数据</li>
				</ul>
			</div>
			
			<div class="bottom">
				<div class="f1">
					<div class="f2">
						<ul class="myul">
							<li>HTML/CSS/ JavaScript/ Html5/ CSS3/ jQuery/ WebApp/ Node.js/ AngularJS/ Bootstrap/ 前端工具/</li>
							<li>PHP/ Java/ Linux/ Python/ C/ C++/ Go/ C#/ 数据结构/</li>
							<li>Android/ iOS/ Unity 3D/ Cocos2d-x/</li>
							<li>MySQL/ MongoDB/ 云计算/ Oracle/ 大数据/ SQL Server/</li>
						</ul>
					</div>
				</div>
			</div>
			
		</div>
	</body>
</html>

*{margin: 0;padding: 0;list-style: none;}
.wrap{width: 1000px;margin: 0 auto;}
.head li,.myul li{float: left;}
.head{width: 100%;height: 50px;background-color: antiquewhite;}
.head li{width: 100px;height: 50px;text-align: center;line-height: 50px;}
.head li:hover{background-color: #7896AF;}

.bottom{width: 100%;height: 0;background-color: #678900;overflow: hidden;}
.f1{width: 500px;height: 500px;margin: 0 auto;background-color: azure;}
.f2{position: relative;top: 150px;width: 500px;height: 100px;background-color: brown;overflow: hidden;}
.myul{position: absolute;left: 0;width: 500%;}
.myul li{width: 500px;line-height: 100px;text-align: center;}

function getclsname(cls, parent) {
	var oparent = parent ? document.getElementById(parent) : document,
		eles = [],
		elements = oparent.getElementsByTagName("*");
	for(var i = 0; i < elements.length; i++) {
		if(elements[i].className == cls) {
			eles.push(elements[i]);
		}
	}
	return eles;
}

function getstyle(obj, sty) {
	if(obj.currentStyle) {
		return obj.currentStyle[sty];
	} else {
		return window.getComputedStyle(obj, false)[sty];
	}

}

var index = 0;
var flag = null;

window.onload = function() {
	var lis = getclsname('head')[0].getElementsByTagName("li"),
		myul = getclsname('myul')[0],
		ow = -parseInt(getstyle(myul.getElementsByTagName("li")[0], 'width'));

	for(var i = 0; i < lis.length; i++) {
		lis[i].index = i;
		lis[i].onclick = function(event) {
			event = event || window.event;
			if(event.stopPropagation) {
				event.stopPropagation();
			} else {
				event.cancelBubble = true;
			}
			index = this.index;
			btshow(500, getclsname('bottom')[0], 'height');
			asd(myul,ow,index);
		}
	}

	document.onclick = function() {
		flag=null;
		btshow(0, getclsname('bottom')[0], 'height');
		
	}
}

function asd(myul,ow,index) {
	if(flag == null) {
		console.log(flag);
		lismove(index, ow);
		flag = index;
	} else {
		if(flag != index) {
			btshow(index * ow, myul, 'left');
		} else {
			return false;
		}

	}
}

var timer = null;
var speed = 0;
var oh = 0;

function btshow(target, obj, sty) {
	clearInterval(timer);
	timer = setInterval(function() {
		var h = parseInt(getstyle(obj, sty));

		if(h == target) {
			clearInterval(timer);
		} else {
			speed = (target - h) / 5
			speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
			h += speed;
			obj.style[sty] = h + 'px';
		}
	}, 50);
}

function lismove(oindex, ow) {
	var myul = getclsname('myul')[0];
	myul.style.left = oindex * ow + 'px';
}

如上代码，先是HTML，然后CSS，最后JS。
我所发现的BUG是，快速点击菜单选项，下面内容也会切换，
但会突然某个点不动了，永远一直的点不动了，
并且之后点击其他菜单选项，下面内容在运动的同时，
再点击那个点不动的选项，其他运动停止。
非常感谢！

飞天意大利面神兽

浏览 1259回答 1

1回答

car

太复杂了，先把无用的代码删除再来问。

1 1

随时随地看视频慕课网APP