html中左侧二级菜单栏,html+css+原生js：多级左菜单

直接上源码；

#olTree ol{display:none}

.tree {margin: 0;padding: 0;background-color:#f2f2f2;overflow: hidden;}

/*隐藏input*/

.tree li input{position: absolute;left: 0;opacity: 0;z-index: 2;cursor: pointer;height: 1em;width:1em;top: 0;}

/*所有菜单项设置统一样式*/

.tree li {position: relative;list-style: none;}

/*一级菜单加下边线*/

.tree>li{border-bottom: 1px solid #d9d9d9;}

/*给有子菜单的菜单项添加背景图标*/

.tree li label {max-width:999px;cursor: pointer;display: block;margin:0 0 0 -50px;padding: 15px 10px 15px 70px;white-space:nowrap;overflow:hidden;text-overflow: ellipsis; }

.tree li label:hover,li label:focus{background-color:#a7a7a7;color:#fff;}

/*清除所有展开的子菜单的display*/

.tree li input + ol{display: none;}

/*当input被选中时，给所有展开的子菜单设置样式*/

.tree input:checked + ol {padding-left:14px;height: auto;display: block;}

.tree input:checked + ol > li { height: auto;}

/*末层菜单为A标签，设置样式*/

.tree li.file a{margin:0 -10px 0 -50px;padding: 15px 20px 15px 70px;text-decoration:none;display: block;color:#333333;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;}

.tree li.file a:hover,li.file a:focus{background-color:#a7a7a7;color:#fff;}

/*不同层级的菜单字体大小不同*/

.tree .folderOne{font-size: 18px;}

.tree .folderTwo{font-size:16px;}

.tree .folderThree{font-size:14px;}

function initTree(){

var navWrap=document.getElementById("olTree");

var nav1s=navWrap.getElementsByTagName("label");

var nav2s=navWrap.getElementsByTagName("ol");

var navA=navWrap.getElementsByTagName("a");

for(var n=0;n

navA[n].οnclick=(function(n){

return function(){

for(var m=0;m

navA[m].style.backgroundColor="#f2f2f2";

navA[m].style.color="#333333";

}

navA[n].style.backgroundColor="#a7a7a7";

navA[n].style.color="#fff";

}

})(n)

}

for(var i=0,len=nav1s.length;i

nav1s[i].οnclick=(function(i){

return function(){

for(var j=0;j

nav2s[j].style.display="none";

}

nav2s[i].style.display="block";

}

})(i)

}

}

1. 常见界面错误举例

2. 泽元框架

   1. 概述
   2. 服务器集群
   3. 模板
   4. 安全机制

3. ZCMS

   1. 实时数据

4. ZAS

   1. 实时数据
   2. 实时数据

5. ZHTML标签

   1. 实时数据
   2. 实时数据

6. UI框架API手册

   1. 实时数据
   2. 实时数据

这段代码里面有个坑，就是在js里面如何正确绑定onclick事件，如果没有参数不要紧，有参数的话非常巧妙。

下面三种不同写法，导致不同后果：

第一种：

var a=1;

var div=document.getElementById("div");

div.οnclick=function(){console.log(a);}

a=2;

div.click();

//控制台输出：2

第二种

var a=1;

var div=document.getElementById("div");

div.οnclick=function(a){console.log(a);}

a=2;

div.click();

//控制台输出：MouseEvent {isTrusted: false, screenX: 0, screenY: 0, clientX: 0, clientY: 0, …}

第三种

var a=1;

var div=document.getElementById("div");

div.οnclick=(function(a){

return function(){

console.log(a);

}

})(a)

a=2;

div.click();

//控制台输出：1

可以看出，第三种才是我们想要的结果。