纯js创建树形菜单

来源：互联网发布：网络计划图软件编辑：程序博客网时间：2024/05/23 00:06

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
ul,li{
list-style-type:none;
}
.divclass{
border:red 1px solid;
width:15em;
height:auto;
}
a{
text-decoration:none;
}
</style>
</head>
<body>
<form>
<div id="divid"></div>
</form>
</body>
<script type="text/javascript">
window.tree();

var licheck = document.forms[0].licheck;//得到子菜单
var check = document.forms[0].ddd;//得到父菜单
//动态加载属性菜单
function tree(){
var divtag = document.getElementById("divid");
      var lilist ="";
   for(var i=0;i<5;i++){
        lilist+="<li ><input type='checkbox' onclick='licheckclick()' name='licheck'/>一级菜单"+i+"</li>";
         }
    var li="<li><input type='checkbox' value='inputname' name='ddd' onclick='checkbocclick()'/><a href='javascript:void(0)' onclick='liclick()'>我是一级菜单</a></li><ul>"+lilist+"</ul>";
    var ul="<ul>"+li+"</ul>";
    divtag.innerHTML=ul;
    divtag.className="divclass";
}
//父节点的点击事件
var state=true;
function liclick(){
var divtag = document.getElementById("divid");
if(state){
var first = divtag.firstChild.lastChild.style.display="none";
state=false;
}else{
var first = divtag.firstChild.lastChild.style.display="block";
   state=true;
}
}
//父节点的多选框
function checkbocclick(){
if(check.checked){
   allanainvoes(licheck,true);
   return;
}else{
   allanainvoes(licheck,false);
   return;
}

function allanainvoes(array,state){
for(var i=0;i<array.length;i++){
     licheck[i].checked=state;
    }
}
}
//子节点的多选框
function licheckclick(){
var num=0;
for(var i=0;i<licheck.length;i++){
   if(licheck[i].checked){
     check.checked=true;
return;
   }else{
if(licheck[i].checked==false){
       num++;
     if(num==licheck.length){
       check.checked=false;
      }
}
}
   }
}
</script>
</html>

0 0