html+css+原生js：多级左菜单

直接上源码；

    








    

        
  
         
常见界面错误举例
  
       
  
           泽元框架 
           

                
概述
  
                
服务器集群
  
                
模板
  
                
安全机制
   
           
       
  
       
  
           ZCMS   
           
  
               
实时数据
  
           
  
       
 
       
  
           ZAS   
           
  
               
实时数据
 
               
实时数据
 
           
  
       
 
       
  
           ZHTML标签   
           
  
               
实时数据
 
               
实时数据
 
           
  
       
 
       
  
           UI框架API手册  
           
  
               
实时数据
 
               
实时数据
 
           
  
       
 
   
 
    
        
    

这段代码里面有个坑，就是在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

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