直接上源码；
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#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;}
</style>
<script type="text/javascript">
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.length;n++){
navA[n].onclick=(function(n){
return function(){
for(var m=0;m<navA.length;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<len;i++){
nav1s[i].onclick=(function(i){
return function(){
for(var j=0;j<len;j++){
nav2s[j].style.display="none";
}
nav2s[i].style.display="block";
}
})(i)
}
}
</script>
</head>
<body onload="initTree()">
<div style="float:left;width: 300px; height: 570px;">
<ol class="tree" id="olTree">
<li class="file folderOne"><a href="#">常见界面错误举例</a></li>
<li>
<label for="folder1" class="folderOne">泽元框架</label>
<ol>
<li class="file folderTwo"><a href="#">概述</a></li>
<li class="file folderTwo"><a href="#">服务器集群</a></li>
<li class="file folderTwo"><a href="#">模板</a></li>
<li class="file folderTwo"><a href="#">安全机制</a></li>
</ol>
</li>
<li>
<label for="folder2" class="folderOne" >ZCMS</label>
<ol>
<li class="file folderTwo"><a href="#">实时数据</a></li>
</ol>
</li>
<li>
<label for="folder3" class="folderOne">ZAS</label>
<ol>
<li class="file folderTwo"><a href="#">实时数据</a></li>
<li class="file folderTwo"><a href="#">实时数据</a></li>
</ol>
</li>
<li>
<label for="folder4" class="folderOne">ZHTML标签</label>
<ol>
<li class="file folderTwo"><a href="#">实时数据</a></li>
<li class="file folderTwo"><a href="#">实时数据</a></li>
</ol>
</li>
<li>
<label for="folder5" class="folderOne">UI框架API手册</label>
<ol>
<li class="file folderTwo"><a href="#">实时数据</a></li>
<li class="file folderTwo"><a href="#">实时数据</a></li>
</ol>
</li>
</ol>
</div>
<iframe src="b.html" height="100%" width="100%" style="float:left;"></iframe>
</body>
</html>
这段代码里面有个坑，就是在js里面如何正确绑定onclick事件，如果没有参数不要紧，有参数的话非常巧妙。
下面三种不同写法，导致不同后果：
第一种：
var a=1;
var div=document.getElementById("div");
div.onclick=function(){console.log(a);}
a=2;
div.click();
//控制台输出：2
第二种
var a=1;
var div=document.getElementById("div");
div.onclick=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.onclick=(function(a){
return function(){
console.log(a);
}
})(a)
a=2;
div.click();
//控制台输出：1
可以看出，第三种才是我们想要的结果。
网友评论