javascript实现树形菜单的方法


Posted in Javascript onJuly 17, 2015

本文实例讲述了javascript实现树形菜单的方法。分享给大家供大家参考。具体如下:

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="https://3water.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;
  }
}

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
May 23 Javascript
javascript 手动给表增加数据的小例子
Jul 10 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
Feb 20 Javascript
JavaScript ParseFloat()方法
Dec 18 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 Javascript
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
vue 实现input表单元素的disabled示例
Oct 28 Javascript
JavaScript实现拖拽盒子效果
Feb 06 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 Javascript
vue中实现点击变成全屏的多种方法
Sep 27 Javascript
JSON与XML优缺点对比分析
Jul 17 #Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 #Javascript
JavaScript用select实现日期控件
Jul 17 #Javascript
纯javascript制作日历控件
Jul 17 #Javascript
javascript生成不重复的随机数
Jul 17 #Javascript
jQuery实现径向动画菜单效果
Jul 17 #Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 #Javascript
You might like
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
js onload事件不起作用示例分析
2013/10/09 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
2017/07/06 Javascript
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
js实现滑动滑块验证登录
2020/07/24 Javascript
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
Python中处理字符串之isalpha()方法的使用
2015/05/18 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
Python-for循环的内部机制
2020/06/12 Python
纯CSS3实现滚动的齿轮动画效果
2014/06/05 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
毕业生自荐信的主要内容
2013/10/29 职场文书
客房主管岗位职责
2013/12/09 职场文书
开办饭店创业计划书
2013/12/28 职场文书
30年同学聚会邀请函
2014/01/25 职场文书
收银出纳员岗位职责
2014/02/23 职场文书
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
文秘求职信范文
2014/04/10 职场文书
演讲稿格式
2014/04/30 职场文书
离职报告范文
2014/11/04 职场文书
三潭印月的导游词
2015/02/12 职场文书
2015年世界粮食日演讲稿
2015/03/20 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
白银帝国观后感
2015/06/17 职场文书
高中团支书竞选稿
2015/11/21 职场文书
css 中多种边框的实现小窍门
2021/04/07 HTML / CSS