美文网首页
html+css+原生js:多级左菜单

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

作者: jection | 来源:发表于2019-03-31 23:48 被阅读0次

直接上源码;

<!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

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

相关文章

网友评论

      本文标题:html+css+原生js:多级左菜单

      本文链接:https://www.haomeiwen.com/subject/asbpbqtx.html