onMouseOut onmouseover onclick事件的调用问题，急求！！

我想要的东西是一个菜单，鼠标单击后，树形菜单展开前面加号变减号，并且背景颜色发生颜色变化；鼠标滑过时，背景颜色也发生颜色变化，并且后面出现一个可以修改的小按钮。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>三级折叠菜单</title>
<style>
h1{ margin:0; padding:0; }
#menu { width:180px; margin:auto;}
 #menu h1 {
font-size:13px;
background-image: url(image/letf_menu.jpg);
height: 30px;
}
 #menu a {
display:block;
text-decoration:none;
height: 30px;
line-height: 30px;
}
#menu .jn {
float: left;
color: #000000;
margin-left: 5px;
font-size: 13px;
}
 #menu .no {display:none;}
#menu .jj {
background-color: #FF0000;
height: 9px;
width: 9px;
line-height: 9px;
border: 1px solid #000000;
color: #FFFFFF;
float: left;
margin-top: 8px;
margin-left: 10px;
font-size: 13px;
text-align: center;
padding-top: 1px;
padding-left: 1px;
}
#menu .undis .gg {
float: left;
}
 #menu .h1 a{
color:#6F0;
background-image: url(image/left_menu1.jpg);
background-repeat: repeat-y;
height: 30px;
line-height: 30px;
}
.undis{display:block;}
.undis{display:none;}
#menu #hh {
font-size: 12px;
line-height: 30px;
color: #0000CC;
float: left;
}
.hovertab1   { 
background:#00CC00;
background-repeat: no-repeat;
color:#1F3A87;
font-weight:bold;
font-size: 14px;
}</style>
<script language="JavaScript">
<!--//
function ShowMenu(obj,n){
 var Nav = obj.parentNode;
  var BName = document.getElementById(Nav.id).getElementsByTagName("span");
  var HName = document.getElementById(Nav.id).getElementsByTagName("h1");
  var t = 1;
 for(var i=0; i<HName.length;i++){
  HName[i].innerHTML = HName[i].innerHTML.replace("-","+");
  HName[i].className = "";
 }
 obj.className = "h" + t;
 for(var i=0; i<BName.length; i++){if(i!=n){BName[i].className = "no";}}
 if(BName[n].className == "no"){
  BName[n].className = "";
  obj.innerHTML = obj.innerHTML.replace("+","-");
 }else{
  BName[n].className = "no";
  obj.className = "";
  obj.innerHTML = obj.innerHTML.replace("-","+");
 }
}
//-->
</script>
<script language="javascript">
  var n;
function m(o){return document.getElementById(o);}function HoverLi1(n){
for(var i=1;i<=4;i++)
{
m('tb1_'+i).className='';
m('tbc1_0'+i).className='undis';
}
m('tbc1_0'+n).className='dis';
m('tb1_'+n).className='hovertab1';
}</script>
</head>
<body>
<div id="menu">
 <h1 onClick="javascript:ShowMenu(this,0)" id="tb1_1" class="onmouseover="x:HoverLi1(1);""   >
 <!--onmouseover="x:HoverLi1(1);"-->
 <a href="javascript:void(0)">
 <div class="jj">+</div> <div class="jn">一级菜单A</div>
 <div class="undis" id="tbc1_01" ><div class="gg"><img src="image/edit.jpg" border="0"/></div></div>
 </a>
 </h1>
       <span class="no"></span>        
 <h1 onClick="javascript:ShowMenu(this,1)"  id="tb1_2" onmouseover="i:HoverLi1(2);" onmouseout="i:HoverLi2(2);">
 <a href="javascript:void(0)">
 <div class="jj">+</div> <div class="jn">rt级菜单A</div><div class="undis" id="tbc1_02" ><div class="gg"><img src="image/edit.jpg" border="0" /></div></div>
 </a>
 </h1>
         <span class="no">  </span>
 <h1 onClick="javascript:ShowMenu(this,2)" id="tb1_3" onmouseover="a:HoverLi1(3);">
 <a href="javascript:void(0)">
 <div class="jj">+</div> <div class="jn">rt级菜单A</div><div class="undis" id="tbc1_03" ><div class="gg"><img src="image/edit.jpg" border="0"/></div></div>
 </a>
 </h1>
       <span class="no"></span>
 <h1 onClick="javascript:ShowMenu(this,3)" id="tb1_4" onmouseover="o:HoverLi1(4);">
 <a href="javascript:void(0)">
 <div class="jj">+</div> <div class="jn">err级菜单A</div><div class="undis" id="tbc1_04" ><div class="gg"><img src="image/edit.jpg" border="0" /></div></div>
 </a>
 </h1>
     <span class="no"> </span>
</div>
</body>
</html>

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>三级折叠菜单</title>
    <style>
    h1{ margin:0; padding:0; }
    #menu { width:180px; margin:auto;}
     #menu h1 {
    font-size:13px;
    background-image: url(image/letf_menu.jpg);
    height: 30px;
    }
     #menu a {
    display:block;
    text-decoration:none;
    height: 30px;
    line-height: 30px;
    }
    #menu .jn {
    float: left;
    color: #000000;
    margin-left: 5px;
    font-size: 13px;
    }
     #menu .no {display:none;}
    #menu .jj {
    background-color: #FF0000;
    height: 9px;
    width: 9px;
    line-height: 9px;
    border: 1px solid #000000;
    color: #FFFFFF;
    float: left;
    margin-top: 8px;
    margin-left: 10px;
    font-size: 13px;
    text-align: center;
    padding-top: 1px;
    padding-left: 1px;
    }
    #menu .undis .gg {
    float: left;
    }
     #menu .h1 a{
    color:#6F0;
    background-image: url(image/left_menu1.jpg);
    background-repeat: repeat-y;
    height: 30px;
    line-height: 30px;
    }
    .undis{display:block;}
    .undis{display:none;}
    #menu #hh {
    font-size: 12px;
    line-height: 30px;
    color: #0000CC;
    float: left;
    }
    .hovertab1 {  
    background:#00CC00;
    background-repeat: no-repeat;
    color:#1F3A87;
    font-weight:bold;
    font-size: 14px;
    }</style>
    <script language="JavaScript">
    <!--//
    function ShowMenu(obj,n){
     var Nav = obj.parentNode;
      var BName = document.getElementById(Nav.id).getElementsByTagName("span");
      var HName = document.getElementById(Nav.id).getElementsByTagName("h1");
      var t = 1;
     for(var i=0; i<HName.length;i++){
      HName[i].innerHTML = HName[i].innerHTML.replace("-","+");
      HName[i].className = "";
     }
     obj.className = "h" + t;
     for(var i=0; i<BName.length; i++){if(i!=n){BName[i].className = "no";}}
     if(BName[n].className == "no"){
      BName[n].className = "";
      obj.innerHTML = obj.innerHTML.replace("+","-");
     }else{
      BName[n].className = "no";
      obj.className = "";
      obj.innerHTML = obj.innerHTML.replace("-","+");
     }
    }
    //-->
    </script>
    <script language="javascript">
    var n;
    function m(o){return document.getElementById(o);}function HoverLi1(n){
    for(var i=1;i<=4;i++)
    {
    m('tb1_'+i).className='';
    m('tbc1_0'+i).className='undis';
    }
    m('tbc1_0'+n).className='dis';
    m('tb1_'+n).className='hovertab1';
    }</script>
    </head>
    <body>
    <div id="menu">
     <h1 onClick="javascript:ShowMenu(this,0)" id="tb1_1" class="onmouseover="x:HoverLi1(1);"" >
     <!--onmouseover="x:HoverLi1(1);"-->
     <a href="javascript:void(0)">
     <div class="jj">+</div> <div class="jn">一级菜单A</div>
     <div class="undis" id="tbc1_01" ><div class="gg"><img src="image/edit.jpg" border="0"/></div></div>
     </a>
     </h1>
      <span class="no"></span>   
     <h1 onClick="javascript:ShowMenu(this,1)" id="tb1_2" onmouseover="i:HoverLi1(2);" onmouseout="i:HoverLi2(2);">
     <a href="javascript:void(0)">
     <div class="jj">+</div> <div class="jn">rt级菜单A</div><div class="undis" id="tbc1_02" ><div class="gg"><img src="image/edit.jpg" border="0" /></div></div>
     </a>
     </h1>
      <span class="no"> </span>
     <h1 onClick="javascript:ShowMenu(this,2)" id="tb1_3" onmouseover="a:HoverLi1(3);">
     <a href="javascript:void(0)">
     <div class="jj">+</div> <div class="jn">rt级菜单A</div><div class="undis" id="tbc1_03" ><div class="gg"><img src="image/edit.jpg" border="0"/></div></div>
     </a>
     </h1>
      <span class="no"></span>
     <h1 onClick="javascript:ShowMenu(this,3)" id="tb1_4" onmouseover="o:HoverLi1(4);">
     <a href="javascript:void(0)">
     <div class="jj">+</div> <div class="jn">err级菜单A</div><div class="undis" id="tbc1_04" ><div class="gg"><img src="image/edit.jpg" border="0" /></div></div>
     </a>
     </h1>
      <span class="no"> </span>
    </div>
    </body>
    </html>