javascript实现树形菜单的方法

 更新时间:2015年07月17日 11:00:52   作者:洞悉  
这篇文章主要介绍了javascript实现树形菜单的方法,涉及javascript动态操作页面元素与节点属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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://www.jb51.net" 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程序设计有所帮助。

相关文章

  • JS中位运算符的一些妙用

    JS中位运算符的一些妙用

    大多数语言都提供了按位运算符,恰当的使用按位运算符有时候会取得的很好的效果,下面这篇文章主要给大家介绍了关于JS中位运算符的一些妙用,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • layui table 参数设置方法

    layui table 参数设置方法

    今天小编就为大家分享一篇layui table 参数设置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • js控制表单操作的常用代码小结

    js控制表单操作的常用代码小结

    本文章来给各位同学收集一些在WEB前台开发中常用的一些控制表单操作函数,有需要的朋友可以参考一下
    2013-08-08
  • 解决layer弹出层自适应页面大小的问题

    解决layer弹出层自适应页面大小的问题

    今天小编就为大家分享一篇解决layer弹出层自适应页面大小的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • js变量作用域及可访问性的探讨

    js变量作用域及可访问性的探讨

    js变量作用域及可访问性的探讨...
    2006-11-11
  • js实现的格式化数字和金额功能简单示例

    js实现的格式化数字和金额功能简单示例

    这篇文章主要介绍了js实现的格式化数字和金额功能,结合简单实例形式分析了javascript数字字符串转换、运算等相关操作技巧,需要的朋友可以参考下
    2019-07-07
  • 基于JavaScript实现游戏购物车效果详解

    基于JavaScript实现游戏购物车效果详解

    这篇文章主要介绍了如何利用JavaScript实现游戏购物车效果,文中的实现代码讲解详细,对我们学习JavaScript有一定帮助,需要的可以参考一下
    2022-03-03
  • JavaScript中参数传递方式详解

    JavaScript中参数传递方式详解

    这篇文章主要为大家详细介绍了JavaScript中参数传递三种方式:按值传递、引用传递和共享传递,文中的示例代码讲解详细,感兴趣的可以了解下
    2023-09-09
  • JS实现图片高斯模糊切换效果的焦点图实例

    JS实现图片高斯模糊切换效果的焦点图实例

    这篇文章主要给大家介绍了利用原生JS如何实现图片高斯模糊切换效果的焦点图,文中给出了完整的实例代码,相信对大家的理解和学习具有一定的参考借鉴价值,下面来一起看看吧。
    2017-01-01
  • 一个JavaScript操作元素定位元素的实例

    一个JavaScript操作元素定位元素的实例

    操作元素定位元素,大家会想到使用js来实现,下面有个不错的示例,大家可以看看
    2014-10-10

最新评论