请高手帮忙看下JS代码

qq_39454760 2017-12-08 06:44:12

要实现的功能是点击出现二级菜单再点击收回 js总报错麻烦帮忙看下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
body{
background-color: rgb(45,44,65);
}
ul{
position: absolute;
left:50%;
top:200px;
margin-left: -180px;
border-radius: 8px;
overflow: hidden;
}
li{
list-style: none;
height:50px;
background-color: white;
width:360px;
}
.hidden{
overflow: hidden;
}
div{
width:310px;
height:49px;
padding-left: 50px;
line-height:49px;
border-bottom: 1px solid rgb(204,204,204);
}
a{
display: block;
text-decoration: none;
width:310px;
line-height:42px;
padding-left: 50px;
color:#d9d9d9;
background-color: rgb(68,67,89);
border-bottom: 1px solid rgb(75,74,94);
}
a:hover{
background-color: rgb(182,59,77);
}
</style>
</head>
<body>
<ul id='wrap'>
<li class='hidden'>
<div>Diseño web</div>
<a href='#'>Photoshop</a>
<a href='#'>HTML</a>
<a href='#'>CSS</a>
<a href='#'>Maquetacion web</a>
</li>
<li class='hidden'>
<div>Diseño web</div>
<a href='#'>Photoshop</a>
<a href='#'>HTML</a>
<a href='#'>CSS</a>
<a href='#'>Maquetacion web</a>
</li>
<li class='hidden'>
<div>Diseño web</div>
<a href='#'>Photoshop</a>
<a href='#'>HTML</a>
<a href='#'>CSS</a>
<a href='#'>Maquetacion web</a>
</li>
<li class='hidden'>
<div>Diseño web</div>
<a href='#'>Photoshop</a>
<a href='#'>HTML</a>
<a href='#'>CSS</a>
<a href='#'>Maquetacion web</a>
</li>
</ul>
</body>
</html>
<script type="text/javascript">
var object={
speed:3,
timer:null,
clickfun:function(id){
var wrap=document.getElementById(id);
var aDiv=wrap.getElementsByTagName('div');
var oA=wrap.getElementsByTagName('a')[0];
for(var i=0;i<aDiv.length;i++){
/*var minH=aDiv[i].offsetHeight;
var maxH=oA.offsetHeight*4+minH-1;*/
aDiv[i].onclick=function(){
object.time(this.parentNode);
alert(this.parentNode);
}
}
},
time:function(element){
this.timer=setInterval(function(){
element.className=='hidden'?this.open(element):this.close(element);
},5)
},
open:function(element){
var minH=aDiv[i].offsetHeight;
var maxH=oA.offsetHeight*4+minH-1;
var nowH=element.offsetHeight;
if(nowH<maxH){
element.style.height=nowH+this.speed+'px';
}else{
clearInterval(this.timer);
element.style.height=maxH;
this.setClassName(element,'');
}
},
close:function(element){
var minH=aDiv[i].offsetHeight;
var nowH=element.offsetHeight;
if(nowH>minH){
element.style.height=nowH-this.speed+'px';
}else{
clearInterval(this.timer);
element.style.height=minH;
this.setClassName(element,'hidden');
}
},
setClassName:function(obj,className){
obj.className=className;
}
}
object.clickfun('wrap');
</script>

...全文

137 1 打赏收藏转发到动态举报

写回复

用AI写文章

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2017-12-08

打赏
举报


	var object = {
		speed: 3,
		timer: null,
		clickfun: function(id) {
			var wrap = document.getElementById(id);
			var aDiv = wrap.getElementsByTagName('div');
			this.oA = wrap.getElementsByTagName('a')[0];
			for (var i = 0; i < aDiv.length; i++) {
				/*var minH=aDiv[i].offsetHeight;
				var maxH=this.oA.offsetHeight*4+minH-1;*/
				aDiv[i].onclick = function() {
					object.time(this);
				}
			}
		},
		time: function(a) {
			var _this = this;
			var element = a.parentNode;
			this.timer = setInterval(function() {
				element.className == 'hidden' ? _this.open(a) : _this.close(a);
			}, 5)
		},
		open: function(a) {
			var element = a.parentNode;
			var minH = a.offsetHeight;
			var maxH = this.oA.offsetHeight * 4 + minH - 1;
			var nowH = element.offsetHeight;
			if (nowH < maxH) {
				element.style.height = nowH + this.speed + 'px';
			} else {
				clearInterval(this.timer);
				element.style.height = maxH;
				this.setClassName(element, '');
			}
		},
		close: function(a) {
			var element = a.parentNode;
			var minH = a.offsetHeight;
			var nowH = element.offsetHeight;
			if (nowH > minH) {
				element.style.height = nowH - this.speed + 'px';
			} else {
				clearInterval(this.timer);
				element.style.height = minH;
				this.setClassName(element, 'hidden');
			}
		},
		setClassName: function(obj, className) {
			obj.className = className;
		}
	}
	object.clickfun('wrap');