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

   dtree 楼主上google搜吧，
我给你段代码
<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>
用jquery库很容易实现的  若自己去实现的话  那就用点累了吧

调试易

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

解决方案 »