Edit in JSRUN

console 命令行工具 X clear

                    
>
console
function dada(r){
	var da=[];
	for(var i=1;i<8;i++){
		if(r<2)
		da.push({'id':i,'ming':'菜单'+r+'_'+i,'link':i,'pid':dada(r+1)});
		else
		da.push({'id':i,'ming':'菜单'+r+'_'+i,'link':i,'pid':r});
	}	
	return da;
}
var ME={
	ini:{i:true,d:{},d1:{},h:0,h1:0,h2:0},
	html:function(da,f){
		var s='<ul'+(f?' class="f"':'')+'>';
		for(var i=0,l=da.length;i<l;i++){
			if(typeof(da[i].pid)=='object'){
				s+='<li><button type="button" class="'+(i==0&&this.ini.i?'s1':(i+1==l?'s5':'s3'))+'" onclick="ME.yc(this)"></button><span><button type="button" class="r1"></button><a href="javascript:;">'+da[i].ming+'</a></span>';
				this.ini.i=false;
				s+=this.html(da[i].pid,(i+1==l));
			}else{
				s+='<li><button type="button" class="'+(i+1==l?'e3':'e1')+'"></button><span><button type="button" class="m1"></button><a href="http://www.onmyfree.sinaapp.com" target="mainFrame">'+da[i].ming+'</a></span>';
			}
			s+='</li>';
		}
		s+='</ul>';
		return s;
	},
	st:function(id,da){
		document.getElementById(id).innerHTML=this.html(da);
	},
	yc:function(a){
		var s=a.className.substr(1);
		if(s%2){
			this.ini.d=a.parentNode.children[2];
			this.ini.h1=this.hei(this.ini.d);
			this.ini.h3=this.ini.h1/10;
			this.yc1(1);
			a.className='s'+(parseInt(s)+1);
			a.parentNode.children[1].children[0].className='r2';
			var ol=a.parentNode.parentNode._;
			if(typeof(ol)=='object'){
				this.ini.d1=ol;
				this.ini.h=ol.offsetHeight;
				this.ini.h2=this.ini.h/10;
				this.yc2(1);
				ol.parentNode.children[0].className='s'+(parseInt(ol.parentNode.children[0].className.substr(1))-1);
				ol.parentNode.children[1].children[0].className='r1';
			}
			a.parentNode.parentNode._=a.parentNode.children[2];
		}else{
			this.ini.d1=a.parentNode.children[2];
			this.ini.h=this.ini.d1.offsetHeight;
			this.ini.h2=this.ini.h/10;
			this.yc2(1);
			a.className='s'+(parseInt(s)-1);
			a.parentNode.children[1].children[0].className='r1';
			a.parentNode.parentNode._='';
		}
	},
	yc1:function(b){
		var h1=ME.ini.h1-(11/(b+1)-1)*ME.ini.h3;
		with(ME.ini.d.style){
			height=h1+'px';
			display='block';
		}
		if(b<10){
		setTimeout('ME.yc1('+(b+1)+')',25);
		}else{
		ME.ini.d.style.display='block';
		ME.ini.d.style.height='';
		}
	},
	yc2:function(b){
		var h1=(11/(b+1)-1)*ME.ini.h2;
		with(ME.ini.d1.style){
			height=h1+'px';
		}
		if(b<10){
		setTimeout('ME.yc2('+(b+1)+')',25);
		}else{
		ME.ini.d1.style.display='';
		ME.ini.d1.style.height='';
		}
	},
	hei:function(a){
		var b=a.cloneNode(true);
		b.style.position='absolute'; 
		b.style.display='block'; 
		b.style.visibility='hidden';
		a.parentNode.appendChild(b);
		var h=b.offsetHeight;
		a.parentNode.removeChild(b);
		return h;
	}
}
</script>
<body onload="ME.st('menu',dada(0))">
<div class="aa" id="menu">
</div>
</body>
.aa{height:500px; width:360px; background-color:#F1F1F1; border:outset 1px #AAA; overflow-y:auto; margin:30px auto; padding:10px;}
#menu *{margin:0px; padding:0px; list-style:none; font-size:12px; line-height:14px;}
#menu a{color:#333; text-decoration:none;}
#menu a:hover{color:#008000;}
#menu li ul{background: url("http://sandbox.runjs.cn/uploads/rs/267/g3ugugjp/line_conn.gif") repeat-y scroll 0 0 transparent; padding-left:18px; display:none; overflow:hidden;}
#menu li ul.f{background:none;}
#menu li button{width:18px; height:18px; background:url("http://sandbox.runjs.cn/uploads/rs/267/g3ugugjp/zTreeStandard.gif") no-repeat; border:none; vertical-align:middle; outline:none 0px; hide-focus:expression(this.hideFocus=true); cursor:pointer;}
#menu li button::-moz-focus-inner{border:none;} 
#menu li span button{width:16px; height:16px; cursor:default; vertical-align:top;}
#menu .s1{background-position:-44px 0;}
#menu .s2{background-position:-62px 0;}
#menu .s3{background-position:-44px -18px;}
#menu .s4{background-position:-62px -18px;}
#menu .s5{background-position:-44px -36px;}
#menu .s6{background-position:-62px -36px;}
#menu .e1{background-position:-26px -18px; cursor:default;}
#menu .e3{background-position:-26px -36px; cursor:default;}
#menu .r2{background-position:-80px -16px; margin-right:2px;}
#menu .r1{background-position:-80px -0; margin-right:2px;}
#menu .m1{background-position:-80px -32px; margin-right:2px;}