补(2005-11-10)整理
达到效果:
点击一项,将该项的下级列表展开
点击另一项,则展开另一项,同时将上一层次展开的子项收缩
满足条件:项数动态 子项动态
实现代码:
<table>
<%
//循环取的项
for(.......){
out.println("<tr id='d"+i+"'");
out.println("<td><a href='#' onclick='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="#" onclick="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="#" onclick="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="#" onclick="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>
分享到：
相关推荐
使用javascript实现的烟花燃放效果，搜集网络资源，进行注释、修改，可以设置烟花的大小，颜色，上升速度，散开速度等各项参数。
最新javascript实现手风琴导航效果源码下载
在本例中，我们使用jsp技术与JavaScript技术实现三级菜单联动的下拉列表框效果。该效果可以应用于各种Web应用程序，例如在线选课系统、在线报名系统、在线问卷系统等。 jsp技术可以与JavaScript技术集成，以实现...
下面我们就来看看如何在asp和asp.net中结合javascript来实现这种效果： 首先，动态添加表格是要在前台实现的，当然后台也可以，不过可能要用到ajax，很麻烦，所以最好采用javascript来实现，下面来介绍动态添加表格...
就像这个图片预览小功能一样，不要说它很小，但是它发挥的作用很明显，在上传前预览一下图片，以免选择了错误的文件，上次写的无刷新文件上传系统最初的目的就是用来实现这个图片预览效果，程序中的JavaScript部分...
1.如何实现简单页面布局 2.使用jsp如何实现隐藏与显示效果 3.通过iframe实现局部动态更新页面内容 1.界面布局 2.JavaScript实现隐藏缩放
解决了要动态生成表格行的问题，效果很好。我的项目中就用到了这个效果。
HTML5+CSS3+JavaScript动态网页设计与制作超全案例演示源代码及开发素材，案例都是分开的单独的html文件，方便查看及了解
主要介绍了JavaScript实现放大镜效果代码示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
用JSP 编写的，实现了动态效果，里面还有很多的JAVASCRIPT代码，实现了动静结合。是一段不错的代码可以看看
jsp实现用户登录，提交数据至oracle数据库，以数据化看板的形式展现，图表区域采用highcharts，数据显示区域，实现高度超过限定值，增加上下滚动，表头不动，数据可上下滚动，
Javascript+Flash实现5副图片切换。 网上常用的图片切换代码。 主要通过Flash实现，代码很简单10行左右，自带5副图片和一个Flash文件。 下载后可直接看到效果。
主要介绍了javascript实现点击提交按钮后显示loading的方法,涉及javascript动态设置页面元素样式的相关技巧,需要的朋友可以参考下
13.9.jsp JavaScript+XML实现通讯录。 addressbook.war JavaScript+XML实现通讯录的工程文件（可以直接在Tomcat下发布运行）。 addressbook.xml 记录通讯录的XML文件。 第14章（\c14） 示例描述：介绍...
该搜索提示效果的实现用到如下技术： AJAX和JSP。 用到Mysql数据库(脚本:tbl_ajax_search.sql) 体会如下： 1.Ajax的实际运用，能使我觉得Ajax不错。 2.JavaScript的深层次运用，使我对JS又进一步了解了很...
CSSmenu 使用Ajax+CSS实现动态菜单效果 第13章（/C13/） 13.1.xml 一个简单的xml文件 13.1.xsl 使用XSLT将XML转换为HTML 13.2.xml 一个雇员列表xml文件 13.2.xsl 一个XSL...
本文实例为大家分享了jquery+Ajax实现分页条效果的具体代码，供大家参考，具体内容如下 一、如果是jsp页面的话，可以用EL表达式和JSTL标签制作一个分页条，没有什么难度。用EL表达式和JSTL标签实现的缺点就是无法...
第16章 JavaScript与JSP结合 601 16.1 窗口与对话框 602 实例368 弹出提示对话框并重定向网页 602 实例369 打开新窗口显示详细信息 604 实例370 打开指定大小的新窗口并居中显示 605 实例371 弹出网页...
又一个动态控制表格的效果，用JavaScript动态生成表格行、表格列，以及还可动态删除这些行列，行等，运行代码后，点击对应的功能按钮，即可实现对应的表格操作功能。 1.jsp 产品名称</th> 编号</th> 数量</th> ...
实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用图片实现质感导航条 72 1.9 下拉菜单式导航条 73 实例047 二...