在JSP中怎么用JS实现树形菜单

txm41 2008-11-04 08:54:30

在JSP中怎么用JS实现树形菜单,

...全文

403 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

woaitiyu 2008-11-04

打赏
举报

xloadTree也不错的！

WrriorKitten 2008-11-04

打赏
举报

学习

sdzxx2008 2008-11-04

打赏
举报

用jquery库很容易实现的若自己去实现的话那就用点累了吧

s_Prince 2008-11-04

打赏
举报

我给你段代码
<html>
<head>
<title>JavaScript树</title>

<style type="text/css">

.Outline{
font-size: 9pt;
margin-left: 15pt;
text-indent: -28pt;
line-height: 15pt;
font-family: "宋体";
text-decoration: none;
}

.Outline1 {
font-size: 9pt;
margin-left: 24pt;
text-indent: -36pt;
line-height: 15pt;
font-family: "宋体";
text-decoration: none;
}

.Outline11 {
font-size: 9pt;
margin-left: 38pt;
text-indent: -50pt;
line-height: 15pt;
font-family: "宋体";
text-decoration: none;
}

.passage0{
font-size: 9pt;
margin-left: 15pt;
text-indent: -28pt;
line-height: 15pt;
font-family: "宋体";
text-decoration: none;
}

.passage1{
font-size: 9pt;
margin-left: 24pt;
text-indent: -36pt;
line-height: 15pt;
font-family: "宋体";
text-decoration: none;
}

.passage11 {
font-size: 9pt;
margin-left: 38pt;
text-indent: -50pt;
line-height: 15pt;
font-family: "宋体";
text-decoration: none;
}

.passage111 {
font-size: 9pt;
margin-left: 51pt;
text-indent: -64pt;
line-height: 15pt;
font-family: "宋体";
text-decoration: none;
}
</style>
<script type="text/javascript">
function clickHandler(){
//定义需要操作的HTML元素id
var targetId;
//定义需要操作的HTML元素
var targetElement;
//访问事件发生时的Event对象，定义发出事件的对象
var srcElement = event.srcElement;
//判断其calssName，访问其CSS样式单名，从而判断它是不是叶子节点，即刻节点可以展开
if(srcElement.className.substr(0,7) == "Outline"){
//获取该节点下展开div节点的id
targetId = srcElement.id.substr(0,12) + "details";
//获取该节点下展开的div节点
targetElement = document.all(targetId);
//如果该节点没有展开
if(targetElement.style.display == "none"){
//展开该节点的内容
targetElement.style.display = "";
}
//如果该叶子节点已经展开
else{
//收起该节点的内容
targetElement.style.display = "none";
}
//获取该节点前的图标的id
targetId = srcElement.id.substr(0,12) + "Image";
//获取该节点前的图标
targetElement = document.all(targetId);
//如果该节点前的图标为加号图标
if(targetElement.src.indexOf("plus")>=0){
//更改成减号图标
targetElement.src = "image/minus.gif";
}else{
//更换成加号图标
targetElement.src = "image/plus.gif";
}
}
}
document.onclick=clickHandler;
</script>
</head>

<body>

<div class="Outline" id="Out0100-0000">
<img class="Outline" id="Out0100-0000Image" style="cursor: hand;width: 20px;height: 20px;" src="image/plus.gif"/>
我的电脑
</div>

<div id="Out0100-0000details" style="display: none;">

<div class="Outline1" id="Out0101-0000">
<img class="Outline1" id="Out0101-0000Image" style="width: 20px;height: 20px;" src="image/plus.gif"/>
本地磁盘C:
</div>

<div id="Out0101-0000details" style="display: none;">
<div class="passage11">
<img class="passage11" src="image/passage.gif" style="width: 20px;height: 20px;"/>
文件一
</div>
<div class="passage11">
<img class="passage11" src="image/passage.gif" style="width: 20px;height: 20px;"/>
文件二
</div>
</div>

<div class="Outline1" id="Out0102-0000">
<img class="Outline1" id="Out0102-0000Image" src="image/plus.gif" style="width: 20px;height: 20px;"/>
本地磁盘D:
</div>

<div id="Out0102-0000details" style="display: none;">
<div class="passage11">
<img class="passage11" src="image/passage.gif" style="width: 20px;height: 20px;"/>
文件三
</div>
<div class="passage11">
<img class="passage11" src="image/passage.gif" style="width: 20px;height: 20px;"/>
文件四
</div>
</div>

<div class="Outline1" id="Out0103-0000">
<img class="Outline1" id="Out0103-0000Image" src="image/plus.gif" style="width: 20px;height: 20px;"/>
本地磁盘E:
</div>

<div id="Out0103-0000details" style="display: none;">
<div class="passage11">
<img class="passage11" src="image/passage.gif" style="width: 20px;height: 20px;"/>
文件五
</div>
<div class="passage11">
<img class="passage11" src="image/passage.gif" style="width: 20px;height: 20px;"/>
文件六
</div>
</div>

<div class="passage1">
<img class="passage1" src="image/passage.gif" style="width: 20px;height: 20px;"/>
文件七
</div>
</div>
</body>
</html>