在Web页中实现折叠式动态目录结构
　　 在Windows系统中，采用树型目录结构对文档进行组织和管理，例如Windows中的“资源管理器”，这种树型目录结构可以随着用户鼠标的单击灵活自如地展开或折叠。这种控制方式在Web页面的组织管理中也极为实用，因为这种可折叠的文档组织结构可以很好地提高网页的显示效率。另一方面，这种控制方式把客户端用户的响应尽可能地在客户端处理了，而无须对用户的每一次响应在客户端与服务器之间进行频繁的网页传送，减少了网站间的传输时间。另外利用Microsoft的“数据绑定”技术，可以使得页面元素成为数据库甚至是数据文本文件的一部分，这样就可以方便地对目录结构的项目进行维护。

　　 下面的程序代码是一个实现折叠式动态目录结构的实例：

<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=gb_2312-80">
<meta name="Author" content="lyc">
<meta name="GENERATOR"
content="Microsoft FrontPage Express 2.0">
<title>山东省财政厅财政信息网</title>
<link rel="stylesheet"
href="/style.css" type="text/css">
<style type="text/css">
<!--
A{text-transform:none;text-decoration:none;}
a:hover{text-decoration:underline}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000"
link="#0000EE"vlink="#800080"
alink="#FF0000">
<script language="JScript">
function show_hide(table_id) {
　　 if (document.all[table_id]
.style.display == "none")
　　 { document.all[table_id]
.style.display = ""; }
　　 else
{ document.all[table_id]
.style.display = "none"; }
}
</script>
<div style="cursor:hand" onclick="show_hide
('Mylist1')";>省内动态</div>
<div>
　　<OBJECT id=HomeData
CLASSID="clsid:333C7BC4-460F-
11D0-BC04-0080C7055A83">
　　<PARAM NAME="DataURL"
VALUE="HomeData.txt">
<PARAM NAME="UseHeader" VALUE="True">
<PARAM NAME="filter" VALUE="index=1">
</OBJECT>
<TABLE ID=Mylist1 style="display: "
border="0" datasrc=#HomeData>
<TBODY >
<TR STYLE="font-size:14" >
<TD> </TD >
<TD><a href=<div datafld=USL>
</div><DIV datafld=fname></DIV
></a></TD>
　　 </TR >
　　 </TBODY >
　　</TABLE >
</div>
<div style="cursor:hand"
onclick="show_hide('Mylist2')";>
国内新闻</div>
<div>
　　<OBJECT id=HomeData2
CLASSID="clsid:333C7BC4-460F-
11D0-BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="HomeData.txt">
<PARAM NAME="UseHeader" VALUE="True">
<PARAM NAME="filter" VALUE="index=2">
</OBJECT>
<TABLE ID=Mylist2 style="display:
" border="0" datasrc=#HomeData2 >
<TBODY >
<TR STYLE="font-size:14" >
<TD> </TD >
<TD><a href=<div datafld=USL>
</div> <DIV
datafld=fname></DIV></a></TD>
<TD> </TD >
</TR >
</TBODY >
　　</TABLE >
</div>
</body>
</html>