一种用div实现js二层节点折叠的方法

来源：互联网发布：微信网络怎么报警编辑：程序博客网时间：2024/04/29 14:12

本方法主要用div嵌套

<!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>
</head>
<script type="text/javascript">
function tree(name, text, js,pos) {

if (js == "javascript:void(0);") {

  if(pos=="1"){
  document.write("<div><div style='width:150px'><table><tr><td onclick='bbb(this)'>" + text+ "</td></tr></table></div>/n");

  }else{


  document.write("<div style='width:150px'><table><tr><td onclick='#'>" + text+ "</td></tr></table></div>/n");
  }

}
else {

  document.write("<div style='display:none;width:150px'><table><tr><td>   <a href='" + js + "'>" + text + "</td></tr></table></a></div>/n");

  if (pos=='0') {
   document.write("</div>");
  }
}
}

function bbb(obj){
var a = obj.parentElement.parentElement.parentElement.parentElement.parentElement.getElementsByTagName("div");
for ( var index = 1; index < a.length; index++) {
var d = a[index];
d.style.display = d.style.display == 'none' ? 'block' : 'none';
}
}

</script>

<body>
<script type="text/javascript">
    tree('first',"第一层",'javascript:void(0);');
  tree('first',"第二层",'javascript:void(0);','1');
    tree('first',"第1层",'#');
    tree('first',"第2层",'#');
    tree('first',"第3层",'#');
    tree('first',"第4层",'#');
    tree('first',"第5层",'#');
    tree('first',"第6层",'#','0');

    tree('s',"第三层",'javascript:void(0);','1');
    tree('s',"第1层",'#');
    tree('s',"第2层",'#');
    tree('s',"第3层",'#');
    tree('s',"第4层",'#');
    tree('s',"第5层",'#');
    tree('s',"第6层",'#','0');
  </script>
</body>
</html>

其中 var a = obj.parentElement.parentElement.parentElement.parentElement.parentElement.getElementsByTagName("div");是核心代码，其中第一层节点有五层，（从里往外数td tr table div div）此时获得的标签div正好是最外层里面的总和，本列为4所以对子节点直接从1开始循环。如果多一个.parentElement则a的对象则为14即所有的div包括了第222层，注意领悟获取的是全局还是局部！