<!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">
var id=0,number=1;
function tree1(name, text, js, pos){
var displayproperty = 'none';
var nbsp = "";
if (pos=='1') {
id+=1;
displayproperty='block';
}
var count = parseInt(pos);
var tempname=id;
for(var i = 0; i < count-1;i+=1){
tempname += "_child";
nbsp+=' ';
}
document.write("<div class='myclass' style='display:"+displayproperty+"' myproperty='"+tempname+"' οnclick='abc(/""+tempname+"/")' >"+nbsp+text+"</div>");
}
function abc(name){
var children = document.getElementsByTagName("div");
/**
* 判断如果事件源节点的没有直接子节点,那么就不用改变。
*/
for ( var index = 0; index < children.length; index+=1) {
var d = children[index];
if (d==event.srcElement) {
d = children[index+1];
if (d.myproperty == name||d.myproperty.length < name.length) {
return;
}
}
}
/**
* 隐藏所有的等级低于事件源节点的所有节点,为后续的显示做准备。
*/
for ( var index = 0; index < children.length; index+=1) {
var d = children[index];
var reg = new RegExp("_child$");
if (d==event.srcElement) {
number = children[index+1].style.display=='none'?1:0;
}
if (/^/d+$/.test(name)) {
if (reg.test(d.myproperty)) {
d.style.display = 'none';
}
continue;
}
reg = new RegExp("^"+name+"_child");
if (reg.test(d.myproperty)) {
d.style.display = 'none';
}
}
var len = children.length;
var flag = 0;
var display = ['none','block'];
// number+=1;
// number%=2;
for ( var index = 0; index+1 < len;) {
var d = children[index];
/**
* 当循环到事件源节点的时候开始执行后面的操作
*/
if (flag == 0 && d!=event.srcElement) {
index+=1;
d = children[index];
continue;
}else{
if (d==event.srcElement) {
// number = children[index+1].style.display=='none'?1:0;
}
d=children[index+=1];
flag = 1;
}
/**
* 事件的源节点和源节点后面紧跟的一个节点的myproperty一样,
* 说明源节点没有子节点,不需要循环了
*/
if (d.myproperty==name) {
break;
}
/**
* 判断源节点后面的这些节点是否是以name+"_child"开头的,
* 主要是用来在"隐藏"(number=0)子节点的时候使用,
* 这样会把该节点后面的所有子节点隐藏
*/
var reg = new RegExp("^"+name+"_child");
/**
* 如果是要"显示"(number=0)后面的子节点,
* 则只需显示该节点的直接子节点,
* 而后面的兄弟节点以及子节点的子节点都不需要处理
*/
if (number==1) {
reg= new RegExp("^"+name+"_child"+"$");
}
/**
* 如果是事件源节点的子节点,
* 那么按照number来进行显示或者隐藏,
* 否则的话:也就是说不是源节点的子节点的时候,
* 如果现在正执行隐藏操作那就跳过后面的源节点的兄弟节点。
*/
if (reg.test(d.myproperty)) {
d.style.display = display[number];
}else{
if (number==0) {
break;
}
}
}
}
</script>
<body>
<script type="text/javascript">
tree1('first',"第ss层",'javascript:void(0);','1');
tree1('first',"第ss层",'javascript:void(0);','1');
tree1('first',"第一层",'javascript:void(0);','1');
tree1('first',"第1层",'#','2');
tree1('first',"第2层",'#','2');
tree1('first',"第21层",'#','3');
tree1('first',"第22层",'#','3');
tree1('first',"第23层",'#','3');
tree1('first',"第3层",'#','2');
tree1('first',"第4层",'#','2');
tree1('first',"第41层",'#','3');
tree1('first',"第42层",'#','3');
tree1('first',"第421层",'#','4');
tree1('first',"第422层",'#','4');
tree1('first',"第4211层",'#','5');
tree1('first',"第4212层",'#','5');
tree1('first',"第4213层",'#','5');
tree1('first',"第42131层",'#','6');
tree1('first',"第42132层",'#','6');
tree1('first',"第42133层",'#','6');
tree1('first',"第421331层",'#','7');
tree1('first',"第421332层",'#','7');
tree1('first',"第421333层",'#','7');
tree1('first',"第42134层",'#','6');
tree1('first',"第4214层",'#','5');
tree1('first',"第4215层",'#','5');
tree1('first',"第4216层",'#','5');
tree1('first',"第423层",'#','4');
tree1('first',"第43层",'#','3');
tree1('first',"第5层",'#','2');
tree1('first',"第51层",'#','3');
tree1('first',"第52层",'#','3');
tree1('first',"第53层",'#','3');
tree1('first',"第二层",'javascript:void(0);','1');
tree1('first',"第1层",'#','2');
tree1('first',"第2层",'#','2');
tree1('first',"第21层",'#','3');
tree1('first',"第22层",'#','3');
tree1('first',"第23层",'#','3');
tree1('first',"第3层",'#','2');
tree1('first',"第4层",'#','2');
tree1('first',"第41层",'#','3');
tree1('first',"第42层",'#','3');
tree1('first',"第421层",'#','4');
tree1('first',"第422层",'#','4');
tree1('first',"第4211层",'#','5');
tree1('first',"第4212层",'#','5');
tree1('first',"第4213层",'#','5');
tree1('first',"第42131层",'#','6');
tree1('first',"第42132层",'#','6');
tree1('first',"第42133层",'#','6');
tree1('first',"第421331层",'#','7');
tree1('first',"第421332层",'#','7');
tree1('first',"第421333层",'#','7');
tree1('first',"第42134层",'#','6');
tree1('first',"第4214层",'#','5');
tree1('first',"第4215层",'#','5');
tree1('first',"第4216层",'#','5');
tree1('first',"第423层",'#','4');
tree1('first',"第43层",'#','3');
tree1('first',"第5层",'#','2');
tree1('first',"第51层",'#','3');
tree1('first',"第52层",'#','3');
tree1('first',"第53层",'#','3');
tree1('first',"第二层",'javascript:void(0);','1');
tree1('first',"第1层",'#','2');
tree1('first',"第2层",'#','2');
tree1('first',"第21层",'#','3');
tree1('first',"第22层",'#','3');
tree1('first',"第23层",'#','3');
tree1('first',"第3层",'#','2');
tree1('first',"第4层",'#','2');
tree1('first',"第41层",'#','3');
tree1('first',"第42层",'#','3');
tree1('first',"第421层",'#','4');
tree1('first',"第422层",'#','4');
tree1('first',"第4211层",'#','5');
tree1('first',"第4212层",'#','5');
tree1('first',"第4213层",'#','5');
tree1('first',"第42131层",'#','6');
tree1('first',"第42132层",'#','6');
tree1('first',"第42133层",'#','6');
tree1('first',"第421331层",'#','7');
tree1('first',"第421332层",'#','7');
tree1('first',"第421333层",'#','7');
tree1('first',"第42134层",'#','6');
tree1('first',"第4214层",'#','5');
tree1('first',"第4215层",'#','5');
tree1('first',"第4216层",'#','5');
tree1('first',"第423层",'#','4');
tree1('first',"第43层",'#','3');
tree1('first',"第5层",'#','2');
tree1('first',"第51层",'#','3');
tree1('first',"第52层",'#','3');
tree1('first',"第53层",'#','3');
</script>
</body>
</html>
2.对每行加展开和折叠图标
function abc(name)
{
var children = document.getElementsByTagName("div");
var aa=event.srcElement;
var h1 = parseInt(aa.myproperty)
//一级父节点合并为样式cata1展开为cata4
//二级节点合并为样式cata2展开为cata5
//三级节点为样式cata3
//第一步先处理事件源节点
if(aa.className=="cata1")
{
aa.className="cata4"
}
else if(aa.className=="cata4")
{
aa.className="cata1"
}
else if(aa.className=="cata2")
{
aa.className="cata5"
}
else if(aa.className=="cata5")
{
aa.className="cata2"
}
/**
* 隐藏所有的等级低于事件源节点的所有节点,为后续的显示做准备。
*/
for ( var index = 0; index < children.length; index+=1) {
var d = children[index];
//第二步处理 非事件源层的其它所有节点
var h1 = parseInt(d.myproperty);
if(h1!=h)
{
if(d.className=="cata4")
{
d.className="cata1"
}
if(d.className=="cata5")
{
d.className="cata2"
}
}
//第三步如果事件源为第一层父节点则把所有子节点全部合并
if(h1==h)
{
if(/^/d+$/.test(aa.myproperty))
{
if(d.className=="cata5")
{
d.className="cata2"
}
}
//第四步:处理兄弟节点
else if(d!=aa&&d.myproperty==name)
{
if(d.className=="cata5")
{
d.className="cata2"
}
}
}
}
注意点:js调用class属性的时候要调用"className"因为class是保留字,另外一个就是如果div里包含超链接并且div和超链接里都有onclick函数,则两个函数都执行,如果让event.srcElement取得的是超链接onclick这个事件源。