课程咨询 :186 8716 1620      qq:2066486918

昆明Java培训 > 达内新闻 > javascript仿qq界面的折叠菜单
  • javascript仿qq界面的折叠菜单

    发布:昆明Java培训      来源:达内新闻      时间:2016-03-09


  • 学习知识很多人不知道我们学习的点在什么地方,昆明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实现日历控件

下一篇:昆明摩宝科技有限公司来达内双选啦

最新开班日期  |  更多

Java--零基础全日制班

Java--零基础全日制班

开班日期:11/30

Java--零基础业余班

Java--零基础业余班

开班日期:11/30

Java--周末提升班

Java--周末提升班

开班日期:11/30

Java--零基础周末班

Java--零基础周末班

开班日期:11/30

  • 网址:http://km .java.tedu.cn      地址:昆明市官渡区春城路62号证券大厦附楼6楼
  • 课程培训电话:186 8716 1620      qq:2066486918    全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内国际公司(TARENA INTERNATIONAL,INC.) 版权所有 京ICP证08000853号-56