长沙java培训
达内长沙芙蓉路中心

18487146383

热门课程

javascript仿qq界面的折叠菜单

  • 时间:2016-03-09
  • 发布:长沙Java培训
  • 来源:达内新闻


学习知识很多人不知道我们学习的点在什么地方,长沙java培训告诉你其实学习从身边的所见就可以开始

   长沙java培训看到qq界面的折叠菜单,于是冒出个想法,写一个类似的,上网查了一下,发现已经有不少类似的菜单效果

以下是html结构:

<div id="a"><div id="h1">sdfds</div><div id="b1">dsfdsfsdfsd</div><div id="h2">dsf</div><div id="b2">dsfdsfsdf</div>.......................</div>

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

下面是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;i<t.length;i++){

var 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.onclick=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;ii<a.all.length;ii++){

if(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;ii<a.all.length;ii++){

if(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是你要传递的二维数组,以一个标题加内容为一个数组项的形式:

下面是调用代码:

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<script src="kongjian.js" ></script>

<script>

var a=sx.activex.packmenu.create([["asd","sadsadas"],["sd","sadsaas"],["w","waedqwdq"],["e","efwefw"]]);

//a.contentEditable=true;

document.body.appendChild(a);

</script>

</body>

</html>

 后期有其他好的分享记得和长沙java培训小编联系,我们的学习其实我们运用的很多操作都是一点点拼凑起来,因此只有多方面学习才能做好开发工作。

上一篇:javascript实现日历控件
下一篇:javascript跑马灯悬停放大效果

长沙java培训:凭什么说学Java很有前途

长沙Java培训 程序员工资到底有多高

长沙Java培训Java行业缺口需创新

2017年第三届中国移动互联网创业者大会召开

选择城市和中心
贵州省

广西省

海南省