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 相关文章推荐
Iframe 自适应高度并实时监控高度变化的js代码
Oct 30 Javascript
也说JavaScript中String类的replace函数
Sep 22 Javascript
自己动手制作jquery插件之自动添加删除行的实现
Oct 13 Javascript
有关javascript的性能优化 (repaint和reflow)
Apr 12 Javascript
javaScript对文字按照拼音排序实现代码
Dec 27 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
简单实现js上传文件功能
Aug 21 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
谈谈我在vue-cli3中用预渲染遇到的坑
Apr 22 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
Thinkphp多文件上传实现方法
2014/10/31 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
2015/06/18 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
从零学习node.js之详解异步控制工具async(八)
2017/02/27 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
js设计模式之代理模式及订阅发布模式实例详解
2019/08/15 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
浅谈Python批处理文件夹中的txt文件
2019/03/11 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
网络书店创业计划书
2014/02/07 职场文书
2014年教育工作总结
2014/11/26 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
小学班主任工作随笔
2015/08/15 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python