1. [代码][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="http://www.za90.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';
}http://www.huiyi8.com/css3/​
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';
}css3动画
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 树形菜单的更多相关文章

  1. javascript树形菜单简单实例

    参考博客地址:http://chengyoyo2006.blog.163.com/blog/static/8451734820087843950604/ <!DOCTYPE HTML PUBLI ...

  2. 实用的树形菜单控件tree

     jQuery plugin: Treeview  这个插件能够把无序列表转换成可展开与收缩的Tree. jQuery plugin: Treeview  jQuery  jstree  jsTree ...

  3. html树形菜单控件

    html树形菜单控件  链接 http://www.ithao123.cn/content-713974.html         jQuery plugin: Treeview  这个插件能够把无序 ...

  4. 【转】html树形菜单控件

    Query plugin: Treeview  这个插件能够把无序列表转换成可展开与收缩的Tree. 主页:http://bassistance.de/jQuery-plugins/jquery-pl ...

  5. jQuery 树形菜单

    树形菜单 在 jQuery easyu中其左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 tree 需要单击分叉节点前的小三角,才 ...

  6. 简单实用的二级树形菜单hovertree

    原创 hovertree是一个仿京东的树形菜单jquery插件,暂时有银色和绿色两种. 官方网址:http://keleyi.com/jq/hovertree/欢迎下载使用 查看绿色效果:http:/ ...

  7. WEB开发中前后台树形菜单的展示设计

    在WEB开发中经常需要进行树形菜单的展示,本例通过不同角度的总结了如下三种实现方式: 通过JS的递归实现前端菜单DOM的动态创建 通过JSP的include指令结合JSTL表达式语言递归实现菜单的展示 ...

  8. DWZ中Tree树形菜单的treeCheck如何获取返回值解决方案

    最近在对DWZ和asp.net MVC3进行整合,其中遇到了很多问题,总算一一解决了,今天就说说题目所示的问题解决方案. 想做一个基于角色的权限管理,要对每一个Action进行权限控制.就想用DWZ的 ...

  9. jquery树形菜单完整代码

    本实例实现了树形的动态菜单,兼容IE8,火狐,Chrome等浏览器.使用了jQuery的toggle() 方法.效果和代码如下: <!DOCTYPE html PUBLIC "-//W ...

随机推荐

  1. 洛谷 [P2485] 计算器

    快速幂+同余方程+BSGS 同余方程在解的时候要注意,在将exgcd求出的解变换为原方程的解的时候,要取模 BSGS的原理就是用分块+hash优化暴力,要注意特判 a 和 b 是 p 的倍数的时候. ...

  2. *LOJ#6227. 「网络流 24 题」最长k可重线段集问题

    $n \leq 500$条平面上的线段,问一种挑选方法,使得不存在直线$x=p$与挑选的直线有超过$k$个交点,且选得的直线总长度最长. 横坐标每个点开一个点,一条线段就把对应横坐标连一条容量一费用( ...

  3. CodeForces 438D 线段树 剪枝

    D. The Child and Sequence time limit per test 4 seconds memory limit per test 256 megabytes input st ...

  4. msp430项目编程52

    msp430综合项目---扩展项目二52 1.电路工作原理 2.代码(显示部分) 3.代码(功能实现) 4.项目总结

  5. LL(1)语法分析器 //c++实现

    #include<iostream> #include<string> #include<map> #include<vector> #include& ...

  6. Netty构建游戏服务器(二)--Hello World

    一,准备工作 1,netty-all-4.1.5.Final.jar(官网下载) 2,eclipse 二,步骤概要 1,服务器开发 (1),创建Server类 该类是程序的主入口,有main方法,服务 ...

  7. http状态码的分类

    状态码分类 转自http://www.cnblogs.com/TankXiao/archive/2013/01/08/2818542.html HTTP状态码被分为五大类, 目前我们使用的HTTP协议 ...

  8. 【postgresql】postgresql中的between and以及日期的使用

    在postgresql中的between and操作符作用类似于,是包含边界的 a BETWEEN x AND y 等效于 a >= x AND a <= y 在postgresql中比较 ...

  9. ASP.NET Core 依赖注入(构造函数注入,属性注入等)

    原文:ASP.NET Core 依赖注入(构造函数注入,属性注入等) 如果你不熟悉ASP.NET Core依赖注入,先阅读文章: 在ASP.NET Core中使用依赖注入   构造函数注入 构造函数注 ...

  10. Map与object的区别

    Map 对象保存键值对.任何值(对象或者原始值) 都可以作为一个键或一个值. 语法 new Map([iterable]) 参数 iterable Iterable 可以是一个数组或者其他 itera ...