qq折叠分组用html怎么写,javascript仿qq界面的折叠菜单实现代码_导航菜单

最近一直在研究网页特效,看到qq界面的折叠菜单,于是冒出个想法,自己写一个类似的,上网查了一下,发现已经有不少类似的菜单效果,不管那么多,先写着再说吧.

以下是html结构:

sdfds

dsfdsfsdfsd

dsf

dsfdsfsdf.......................

id为a里的便是你要添加的菜单的标题和内容.

下面是javascript代码:

sx.activex.packmenu={

create:function(t){

var a=document.createElement("div");

var _t=t;

a.style.height="300px";

a.style.width="150px";

a.style.border="1px red solid";

a.style.overflow="hidden";

for(var i=0;ivar h=document.createElement("div");

var b=document.createElement("div");;

h.style.backgroundColor="blue";

h.style.height="10%";

b.style.padding="5px";

b.style.textAlign="center";

b.style.border="1px green solid";

h.innerHTML=t[i][0];

b.innerHTML=t[i][1];

b.style.overflow="hidden";

b.style.height="0px";

b.style.display="none";

h.οnclick=function(){

if(this.nextSibling.style.display=="none"){

this.nextSibling.style.height="1px";

this.nextSibling.style.display="block";

this.h=window.setInterval(function(t,t1){

return function(){

if(!t1) return;

//alert(t.nextSibling.offsetHeight);

if(parseInt(t.nextSibling.style.height)<100-_t.length*parseInt(a.all[0].style.height)-3){

t.nextSibling.style.height=parseInt(t.nextSibling.style.height)+3+"%";

t1.style.height=parseInt(t1.style.height)-3+"%";

}

else{

t.nextSibling.style.height=100-_t.length*parseInt(a.all[0].style.height)+"%";;

t1.style.display="none";

t1.style.height="0px";

window.clearInterval(t.h);

}

}

}(this,(function(){

for(var ii=0;iiif(parseInt(a.all[ii].style.height)>10)

return a.all[ii];

}

})()),10);

}

else{

if(this!=this.parentNode.firstChild){

this.previousSibling.style.height="1px";

this.previousSibling.style.display="block";

}

else{

this.parentNode.lastChild.style.display="block";

this.parentNode.lastChild.style.height="1px";

}

this.h=window.setInterval(function(t,t1){

return function(){

if(!t1) return;

if(parseInt(t.nextSibling.style.height)>3){

if(t!=t.parentNode.firstChild)

t.previousSibling.style.height=parseInt(t.previousSibling.style.height)+3+"%";

else

t.parentNode.lastChild.style.height=parseInt(t.parentNode.lastChild.style.height)+3+"%";

t1.style.height=parseInt(t1.style.height)-3+"%";

}

else{

if(t!=t.parentNode.firstChild)

t.previousSibling.style.height=100-_t.length*parseInt(a.all[0].style.height)+"%";

else

t.parentNode.lastChild.style.height=100-_t.length*parseInt(a.all[0].style.height)+"%";

t.nextSibling.style.display="none";

t.nextSibling.style.height="0px";

window.clearInterval(t.h);

}

}

}(this,(function(){

for(var ii=0;iiif(parseInt(a.all[ii].style.height)>10)

return a.all[ii];

}

})()),1);

}

}

a.appendChild(h);

a.appendChild(b);

a.all[1].style.display="block";

a.all[1].style.height=100-t.length*parseInt(a.all[0].style.height)+"%";

}

return a;

}

}

入口参数t是你要传递的二维数组,以一个标题加内容为一个数组项的形式:

下面是调用代码:

Untitled Document

搞定,有兴趣的朋友可以看下效果.

声明：本文原创发布php中文网，转载请注明出处，感谢您的尊重！如有疑问，请联系admin@php.cn处理