补(2005-11-10)整理
达到效果:
点击一项,将该项的下级列表展开
点击另一项,则展开另一项,同时将上一层次展开的子项收缩
满足条件:项数动态 子项动态
实现代码:
<table>
<%
//循环取的项
for(.......){
out.println("<tr id='d"+i+"'");
out.println("<td><a href='#' οnclick='setMenu(d"+i+");'>");
out.println(显示项名称+"</a></td>");
out.println("</tr>");
//某一项下的所有子项
for(...........){
out.println("<tr id='d"+i+"' style='display:none' >");
out.println("<td><a>"+显示子项名称+"</a></td>");
out.println("</tr>")
}
}
%>
</table>
<script>
function setMenu(obj){
var arrType=new Array(<%=项的记录总数%>);
<%
for(........){ //循环
%>
arrType[<%=i%>]=d<%=i%>; //将项的tr Id值放入JavaScript数组中
<%
}
%>
if(obj!=null){ //根据传入的当前点击项进行判断
for(var i=1;i<obj.length;i++){
if(obj[i].style.display=="none")
obj[i].style.display="inline";
else
obj[i].style.display="none";
}
}
//将其它项的子项收住(隐藏)
for(var j=0;j<arrType.length;j++){
var objOther=arrType[j];
if(objOther!=obj){
for(var k=1;k<objOther.length;k++){
objOther[k].style.display="none";
}
}
}
}
</script>
扩展成三级应用
提供在项目中用到的静态的HTML代码参考:
<head>
<script>
/*
在CatalogListFacade类中
注:二级目录循环得到 id =d+i
三级目录循环得到 id = subd+10000+i
*/
//二级目录点击 (增加对象参数objsub)
function setMenu(obj,objsub){
if(typeof(obj)!="undefined"){
for(var i=1;i<obj.length;i++){
if(obj[i].style.display=="none"){
obj[i].style.display="inline";
}else{
//收拢第二级目录下的所有元素
obj[i].style.display="none";
}
}
}
}
//在showDefault.jsp页面中补充此Script方法
//三级目录点击
function setSubMenu(obj){
if(typeof(obj)!="undefined"){
for(var i=1;i<obj.length;i++){
if(obj[i].style.display=="none")
obj[i].style.display="inline";
else
obj[i].style.display="none";
}
}
}
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr id="d0">
<td><a href="#" οnclick="setMenu(d0);">第二级目录</a></td>
</tr>
<!--第三级目录 Start-->
<tr id="d0" style="display:none">
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr id="d10000">
<td><img src="I.png"><br><img src="T.png"></td>
<td valign='bottom'><a href="#" οnclick="setSubMenu(d10000)">第三级目录1</a></td>
</tr>
</table>
</td>
</tr>
<!--三级栏目1下的文档-->
<!--关键点:重写一下生成目录下的文档的方法(当为获得三级目录下的文档标题列表时调用)-->
<tr id="d10000" style="display:none">
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="I.png"><br><img src="I.png"></td>
<td> </td>
<td> </td>
<td><img src="I.png"><br><img src="T.png"></td>
<td valign='bottom'>第三级目录1下Document-One</td>
</tr>
<tr>
<td><img src="I.png"><br><img src="I.png"></td>
<td> </td>
<td> </td>
<td><img src="I.png"><br><img src="L.png"></td>
<td valign='bottom'>第三级目录1下Document-Two</td>
</tr>
</table>
</td>
</tr>
<!--三级栏目1下的文档End-->
</table>
</td>
</tr>
<tr id="d0" style="display:none">
<td><table border="0" cellpadding="0" cellspacing="0"><tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr id="d10001">
<td valign='top'><img src="I.png"><br><img src="T.png"></td>
<td valign='bottom'><a href="#" οnclick="setSubMenu(d10001)">第三级目录2</a></td>
</tr>
</table>
</td>
</tr>
<!--三级栏目2下的文档-->
<tr id="d10001" style="display:none">
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="I.png"><br><img src="I.png"></td>
<td> </td>
<td> </td>
<td><img src="I.png"><br><img src="T.png"></td>
<td valign='bottom'>三级目录2下Document-One</td>
</tr>
<tr>
<td><img src="I.png"><br><img src="I.png"></td>
<td> </td>
<td> </td>
<td><img src="I.png"><br><img src="L.png"></td>
<td valign='bottom'>三级目录2下Document-Two</td>
</tr>
</table>
</td>
</tr>
<!--三级栏目2下的文档End-->
</table></td></tr>
<!--三级栏目End-->
<!--二级栏目下的文档-->
<tr id="d0" style="display:none">
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign='top'><img src="I.png"><br><img src="L.png"></td>
<td valign='bottom'>第二级目录下的文档1</td>
</tr>
</table>
</td>
</tr>
</table>
</table>
</body>