一个简单的树形结构 -

wubing2789

浏览: 7071 次
性别:
来自: 鞍山

最近访客更多访客>>

闫昌盛

rescuer023

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

一个简单的树形结构

ITeye XHTML HTML

<!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=UTF-8"" />
<style>
.MENU1_FOLDER {
margin-left: 1px;
margin-right: 1px;
margin-top: 1px;
margin-bottom: 0px;
vertical-align: middle;
}

.MENU1_FILE {
margin-left: 1px;
margin-right: 1px;
margin-top: 1px;
margin-bottom: 0px;
vertical-align: middle;
}

.MENU2_FOLDER {
margin-left: 17px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
vertical-align: middle;
}

.MENU2_FILE {
margin-left: 30px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
vertical-align: middle;
}

.MENU3_FOLDER {
margin-left: 17px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
vertical-align: middle;
}

.MENU3_FILE {
margin-left: 30px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
vertical-align: middle;
}
.FOLDER_PIC {
cursor: pointer;
}

</style>

<script language="javascript" type="text/javascript">
function toggleFolder(objId){
var folderObj = document.getElementById(objId + "_FOLDER_PIC");
var childObj = document.getElementById(objId + "_CHILD");

if(childObj.style.display == "none"){
childObj.style.display = "block";
folderObj.src = "folder_open.gif";
}
else{

childObj.style.display = "none";
folderObj.src = "folder_close.gif";
}

}
</script>
</head>
<body>
<div id="M2_FOLDER_PIC" class="MENU1_FOLDER" >
<table border="0" cellpadding="2" cellspacing="0">
<tr valign="middle">
<td><img id="M1_FOLDER_PIC" src="folder_close.gif" width="9" height="9" class="FOLDER_PIC" onClick="toggleFolder('M2')"/></td>
<td><img src="folder.gif" width="15" height="12"/></td>
<td nowrap="nowrap">1个树</td>
</tr>
</table>

<div id="M2_CHILD" style="display:none;">

<div class="MENU2_FOLDER">
<table border="0" cellpadding="2" cellspacing="0">
<tr valign="middle">
<td><img id="M2_1_FOLDER_PIC" src="folder_close.gif" width="9" height="9" class="FOLDER_PIC" onClick="toggleFolder('M2_1')" /></td>
<td><img src="folder.gif" width="15" height="12"/></td>
<td nowrap="nowrap">2个树</td>
</tr>
</table>
<div id="M2_1_CHILD" style="display:none;">
<div class="MENU3_FOLDER">
<table border="0" cellpadding="2" cellspacing="0">
<tr valign="middle">
<td><img src="file.gif" width="14" height="12"/></td>
<td nowrap="nowrap"><a href=#" class="MENU">33</a></td>
</tr>
</table>
</div>
</div>
<table border="0" cellpadding="2" cellspacing="0">
<tr valign="middle">
<td><img id="M2_2_FOLDER_PIC" src="folder_close.gif" width="9" height="9" class="FOLDER_PIC" onClick="toggleFolder('M2_2')" /></td>
<td><img src="folder.gif" width="15" height="12"/></td>
<td nowrap="nowrap">3个树</td>
</tr>
</table>
<div id="M2_2_CHILD" style="display:none;">
<div class="MENU3_FOLDER">
<table border="0" cellpadding="2" cellspacing="0">
<tr valign="middle">
<td><img src="file.gif" width="14" height="12"/></td>
<td nowrap="nowrap"><a href=#" class="MENU">44</a></td>
</tr>
</table>
</div>
</div>

</div>

</div>
</div>
</body>
</html>

分享到：