高手帮忙改下代码，帮我实现树状列表合起和展开用“>” “V”表示，下面是这个页面的源码。

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>leftindex</title>
<script language="javascript">
function PhenItem(id,pid,label,url,type,img,over,img2,over2,title,target){

   this.id=id;
   this.pid=pid;
   this.label=label;
   this.url=url;
   this.title=title;
   this.target=target;
   this.img=img;
   this.over=over;
   this.img2=img2;
   this.over2=over2;
   this.type=type;
   //this._ih = false; //is it the head item?
   this._hc = false;   //has the child item?
   this._ls = false; //has sibling item?
   this._io = false; //whether the panelbar is open?
};
//menu object
function PhenMenu(objName) {    this.config = { closeSameLevel : true };
this.obj = objName; this.items = [];

this.root = new PhenItem(-1);

};//add a new item to the item array
PhenMenu.prototype.add = function(id,pid,label,url,type,img,over,img2,over2,title,target){
this.items[this.items.length] = new PhenItem(id,pid,label,url,type,img,over,img2,over2,title,target);
};// Outputs the menu to the page
PhenMenu.prototype.toString = function() {
var str = '<div>\n'; if (document.getElementById) { str += this.addItem(this.root); } else str += 'Browser not supported.'; str += '\n</div>';
return str;};// Creates the menu structure
PhenMenu.prototype.addItem = function(pItem) { var str = '';
for (var n=0; n<this.items.length; n++) {

if(this.items[n].pid == pItem.id){

var ci = this.items[n];
this.setHS(ci);
str += this.itemCreate(ci, n);

if(ci._ls) break;

} } return str;};// Creates the node icon, url and text
PhenMenu.prototype.itemCreate = function(pItem, itemId) {
var str = '';

    if(pItem.type == 'header')
     str = '<table width="100%" class="header" valign="middle" onmouseover="this.className=\'headerSelected\'" onmouseout="this.className=\'header\'" onclick="'+this.obj+'.o('+itemId+')"><tr><td>';

else
str = '<table width="100%" class="item" valign="middle" onmouseover="this.className=\'itemOver\'" onmouseout="this.className=\'item\'" onclick="'+this.obj+'.o('+itemId+')"><tr><td>'; if (pItem.img) { str += '  <img id="i' + this.obj + itemId + '" src="' + pItem.img + '" alt="" />'; }
if (pItem.url) {
str += '<a id="s' + this.obj + itemId + '" class="navigation_item" href="' + pItem.url + '"';
if (pItem.title) str += ' title="' + pItem.title + '"';
if (pItem.target) str += ' target="' + pItem.target + '"';
str += ' onmouseover="window.status=\'' + pItem.label + '\';return true;" onmouseout="window.status=\'\';return true;"';
str += '>';
}
str += '    ' + pItem.label;
if (pItem.url) str += '</a>';
str += '</td></tr></table>'; if (pItem._hc) {
str += '<table id="ct' + this.obj + itemId + '" width="100%" style="display:' + ((pItem._io) ? 'block' : 'none') + '; FILTER: blendTrans(Duration=0.5); VISIBILITY: hidden"><tr><td>';
str += this.addItem(pItem);
str += '</td></tr></table>';
//alert(str);
//document.write(str);
} return str;
};
// Checks whether a item has child and if it is the last sibling
PhenMenu.prototype.setHS = function(pItem) {
var lastId; for (var n=0; n<this.items.length; n++) { if (this.items[n].pid == pItem.id) pItem._hc = true; if (this.items[n].pid == pItem.pid) lastId = this.items[n].id; } if (lastId==pItem.id) pItem._ls = true;};// Toggle Open or close
PhenMenu.prototype.o = function(id) {
//alert(this.items.length);
var ci = this.items[id];
this.itemStatus(!ci._io, id); ci._io = !ci._io;
    
if (this.config.closeSameLevel) this.closeLevel(ci);};// Change the status of a item(open or closed)
PhenMenu.prototype.itemStatus = function(status, id) { cTable= document.getElementById('ct' + this.obj + id); if(status){

cTable.filters.item(0).Apply();
cTable.style.display = 'block';
cTable.style.visibility = "";
cTable.filters.item(0).Play();
}
else
cTable.style.display = 'none';

//cDiv.style.display = (status) ? 'block': 'none';
};// Closes all items on the same level as certain item
PhenMenu.prototype.closeLevel = function(pItem) {
               
for (var n=0; n<this.items.length; n++) {
if ((this.items[n].pid == pItem.pid) && (this.items[n].id != pItem.id) && this.items[n]._hc) {

this.itemStatus(false, n); this.items[n]._io = false; this.closeAllChildren(this.items[n]); } }};PhenMenu.prototype.closeAllChildren = function(pItem) { for (var n=0; n<this.items.length; n++) { if (this.items[n].pid == pItem.id && this.items[n]._hc) { if (this.items[n]._io) this.itemStatus(false, n); this.items[n]._io = false; this.closeAllChildren(this.items[n]); } }};
function href(){
document.myform.action="../SerchReport?city=jiangsu";
document.myform.submit();
};
</script>
<style>
.header {

height:30px;
FONT-FAMILY: Arial,Verdana;
font-size:15px;
color: #000033;
    
}
.headerSelected { height:30px;
FONT-FAMILY: Arial,Verdana;
font-size:15px;
background-repeat:repeat-x; 
COLOR: #000033;
CURSOR: pointer;
font-weight: bold;
}.navigation_item {
PADDING-LEFT: 5px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; TEXT-DECORATION: none
}
.item {
    PADDING-LEFT: 5px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; 
}
.itemOver {
PADDING-LEFT: 5px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #333333; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; font-weight:bold; 
}
.itemSelected {
PADDING-LEFT: 20px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; TEXT-DECORATION: underline;
}A.headerSelected {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND-IMAGE: none; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; HEIGHT: 10px
}
body {
background-image: url(../img/left.gif);background-repeat: no-repeat;
}
</style>
</head>
<base target="mainFrame">
<body bgcolor="#ffffcc" onload="href()">
<form action="" name="myform">
<table width="221" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
<!-- function(id,pid,label,url,type,img,over,img2,over2,title,target) -->
<script type="text/javascript">
p = new PhenMenu('p');
p.add(0,-1,'>','','header','');
        p.add(1,0,'按列表模式','../SerchReport?city=jiangsu','','../img/table.gif');
        p.add(2,0,'按图形模式','../chartMode.jsp','','../img/graph.gif');
document.write(p);
p.o(0);
</script>
</td>
  </tr>
</table>
</form>
</body>
</html>

解决方案 »

  1.   

    做了修改的地方已经用蓝色标记了
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
    <html> 
    <head> 
    <title>leftindex </title> 
    <script language="javascript"> 
    function PhenItem(id,pid,label,url,type,img,over,img2,over2,title,target){   this.id=id; 
      this.pid=pid; 
      this.label=label; 
      this.url=url; 
      this.title=title; 
      this.target=target; 
      this.img=img; 
      this.over=over; 
      this.img2=img2; 
      this.over2=over2; 
      this.type=type; 
      //this._ih = false; //is it the head item? 
      this._hc = false;  //has the child item? 
      this._ls = false; //has sibling item? 
      this._io = false; //whether the panelbar is open? 
    }; 
    //menu object 
    function PhenMenu(objName) {     this.config = { closeSameLevel : true }; 
    this.obj = objName; this.items = []; this.root = new PhenItem(-1); }; //add a new item to the item array 
    PhenMenu.prototype.add = function(id,pid,label,url,type,img,over,img2,over2,title,target){ 
    this.items[this.items.length] = new PhenItem(id,pid,label,url,type,img,over,img2,over2,title,target); 
    }; // Outputs the menu to the page 
    PhenMenu.prototype.toString = function() { 
    var str = ' <div>\n'; if (document.getElementById) { str += this.addItem(this.root); } else str += 'Browser not supported.'; str += '\n </div>'; 
    return str; }; // Creates the menu structure 
    PhenMenu.prototype.addItem = function(pItem) { var str = ''; 
    for (var n=0; n <this.items.length; n++) { if(this.items[n].pid == pItem.id){ var ci = this.items[n]; 
    this.setHS(ci); 
    str += this.itemCreate(ci, n); if(ci._ls) break; } } return str; }; // Creates the node icon, url and text 
    PhenMenu.prototype.itemCreate = function(pItem, itemId) { 
    var str = '';     if(pItem.type == 'header') 
        str = ' <table width="100%" class="header" valign="middle" onmouseover="this.className=\'headerSelected\'" onmouseout="this.className=\'header\'" onclick="'+this.obj+'.o('+itemId+')"> <tr> <td>'; else 
    str = ' <table width="100%" class="item" valign="middle" onmouseover="this.className=\'itemOver\'" onmouseout="this.className=\'item\'" onclick="'+this.obj+'.o('+itemId+')"> <tr> <td>'; if (pItem.img) { str += '  <img id="i' + this.obj + itemId + '" src="' + pItem.img + '" alt="" />'; } 
    if (pItem.url) { 
    str += ' <a id="s' + this.obj + itemId + '" class="navigation_item" href="' + pItem.url + '"'; 
    if (pItem.title) str += ' title="' + pItem.title + '"'; 
    if (pItem.target) str += ' target="' + pItem.target + '"'; 
    str += ' onmouseover="window.status=\'' + pItem.label + '\';return true;" onmouseout="window.status=\'\';return true;"'; 
    str += '>'; 
    }else{
    str += '<span id="span'+this.obj+itemId+'">';
    }
    str += '    ' + pItem.label; 
    if (pItem.url) str += ' </a>'; else str += '</span>'; 
    str += ' </td> </tr> </table>'; if (pItem._hc) { 
    str += ' <table id="ct' + this.obj + itemId + '" width="100%" style="display:' + ((pItem._io) ? 'block' : 'none') + '; FILTER: blendTrans(Duration=0.5); VISIBILITY: hidden"> <tr> <td>'; 
    str += this.addItem(pItem); 
    str += ' </td> </tr> </table>'; 
    //alert(str); 
    //document.write(str); 
    } return str; 
    }; 
    // Checks whether a item has child and if it is the last sibling 
    PhenMenu.prototype.setHS = function(pItem) { 
    var lastId; for (var n=0; n <this.items.length; n++) { if (this.items[n].pid == pItem.id) pItem._hc = true; if (this.items[n].pid == pItem.pid) lastId = this.items[n].id; } if (lastId==pItem.id) pItem._ls = true; }; // Toggle Open or close 
    PhenMenu.prototype.o = function(id) { 
    //alert(this.items.length); 
    var ci = this.items[id]; 
    this.itemStatus(!ci._io, id); ci._io = !ci._io; 
        
    if (this.config.closeSameLevel) this.closeLevel(ci); }; // Change the status of a item(open or closed) 
    PhenMenu.prototype.itemStatus = function(status, id) { cTable= document.getElementById('ct' + this.obj + id); 
    var obj = document.getElementById('span' + this.obj + id);
    if(status){ cTable.filters.item(0).Apply(); 
    cTable.style.display = 'block'; 
    cTable.style.visibility = ""; 
    cTable.filters.item(0).Play();
    if(obj) obj.innerText = "V";
    } 
    else 
    {
    cTable.style.display = 'none'; 
    if(obj) obj.innerText = ">";
    }
    //cDiv.style.display = (status) ? 'block': 'none'; 
    }; // Closes all items on the same level as certain item 
    PhenMenu.prototype.closeLevel = function(pItem) { 
                  
    for (var n=0; n <this.items.length; n++) { 
    if ((this.items[n].pid == pItem.pid) && (this.items[n].id != pItem.id) && this.items[n]._hc) { this.itemStatus(false, n); this.items[n]._io = false; this.closeAllChildren(this.items[n]); } } }; PhenMenu.prototype.closeAllChildren = function(pItem) { for (var n=0; n <this.items.length; n++) { if (this.items[n].pid == pItem.id && this.items[n]._hc) { if (this.items[n]._io) this.itemStatus(false, n); this.items[n]._io = false; this.closeAllChildren(this.items[n]); } } }; 
    function href(){ 
    document.myform.action="../SerchReport?city=jiangsu"; 
    document.myform.submit(); 
    }; 
    </script> 
    <style> 
    .header { height:30px; 
    FONT-FAMILY: Arial,Verdana; 
    font-size:15px; 
    color: #000033; 
        
    } 
    .headerSelected { height:30px; 
    FONT-FAMILY: Arial,Verdana; 
    font-size:15px; 
    background-repeat:repeat-x; 
    COLOR: #000033; 
    CURSOR: pointer; 
    font-weight: bold; 
    } .navigation_item { 
    PADDING-LEFT: 5px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; TEXT-DECORATION: none 
    } 
    .item { 
        PADDING-LEFT: 5px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; 
    } 
    .itemOver { 
    PADDING-LEFT: 5px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #333333; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; font-weight:bold; 
    } 
    .itemSelected { 
    PADDING-LEFT: 20px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; TEXT-DECORATION: underline; 
    } A.headerSelected { 
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND-IMAGE: none; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; HEIGHT: 10px 
    } 
    body { 
    background-image: url(../img/left.gif);background-repeat: no-repeat; 
    } 
    </style> 
    </head> 
    <base target="mainFrame"> 
    <body bgcolor="#ffffcc" onload="href()"> 
    <form action="" name="myform"> 
    <table width="221" border="0" cellspacing="0" cellpadding="0"> 
      <tr> 
        <td> 
    <!-- function(id,pid,label,url,type,img,over,img2,over2,title,target) --> 
    <script type="text/javascript"> 
    p = new PhenMenu('p'); 
    p.add(0,-1,'>','','header',''); 
            p.add(1,0,'按列表模式','../SerchReport?city=jiangsu','','../img/table.gif'); 
            p.add(2,0,'按图形模式','../chartMode.jsp','','../img/graph.gif'); 
    document.write(p); 
    p.o(0); 
    </script> 
    </td> 
      </tr> 
    </table> 
    </form> 
    </body> 
    </html> 
      

  2.   

    还有这句
    var obj = document.getElementById('span' + this.obj + id);