<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <style>
             body{ font: 10pt
        宋体,sans-serif; color: navy; } .branch{ cursor: pointer; cursor: hand;
        display: block; } .leaf{ display: none; margin-left: 16px; } a{
        text-decoration: none; } a:hover{ text-decoration: underline; }
        
        </style>

    </head>
    <script type="text/javascript">
 function showBranch(branch){
     var objBranch = document.getElementById(branch).style;
     if (objBranch.display=="block") objBranch.display="none";
     else
    objBranch.display="block"; swapFolder('I' + branch); }
    function swapFolder(img){ objImg = document.getElementById(img); if
    (objImg.src.indexOf('closed.gif')>-1) objImg.src = openImg.src; else
    objImg.src = closedImg.src; }
   
   
   
   
    function tree(){
this.branches = new Array();
this.add = addBranch;
this.write = writeTree;
}


function addBranch(branch){
this.branches[this.branches.length] = branch;
}

function writeTree(){
var treeString = '';
var numBranches = this.branches.length;
for (var i=0;i<numBranches;i++){
treeString += this.branches[i].write();
document.write(treeString);
}
}


function branch(id, text){
this.id = id;
this.text = text;
this.write = writeBranch;
this.add = addLeaf;
this.leaves = new Array();
}


function addLeaf(leaf){
this.leaves[this.leaves.length] = leaf;
}

function writeBranch(){
var branchString =
'<span class="branch"' + 'onClick="showBranch(\'' + this.id + '\')"';
branchString += '><img src="closed.gif" id="I' + this.id + '">' + this.text;
branchString += '</span>';
branchString += '<span class="leaf" id="';
branchString += this.id + '">';   
var numLeaves = this.leaves.length;
for (var j=0;j< numLeaves;j++) branchString += this.leaves[j].write();
branchString += '</span>';
return branchString;
}

function leaf(text, link){
this.text = text;
this.link = link;
this.write = writeLeaf;
}


function writeLeaf(){
var leafString = '<a href="' + this.link + '">';
leafString += '<img src="doc.gif" border="0">';
leafString += this.text;
leafString += '</a><br>';
return leafString;
}


var myTree = new tree();
var branch1 = new branch('branch1','JavaScript参考书');
var leaf1 = new leaf('前言','#');
var leaf2 = new leaf('绪论','#');
branch1.add(leaf1);
branch1.add(leaf2);
myTree.add(branch1);

var branch2 = new branch('branch2','第一章');
branch2.add(new leaf('第一节','#'));
branch2.add(new leaf('第二节','#'));
branch2.add(new leaf('第三节','#'));
branch1.add(branch2);

var branch3 = new branch('branch2','第二章');
branch3.add(new leaf('第一节','#'));
branch3.add(new leaf('第二节','#'));
branch3.add(new leaf('第三节','#'));
branch1.add(branch3);

myTree.add(new leaf('联系我们','#'));
myTree.write();


</script>
    <body>
    </body>
</html>