联级菜单问题

qrqwqrwe 2013-09-13 06:01:29

<HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

<style>

a {

       font-family:Arial, Helvetica, sans-serif;

       font-size:10px;

       color:#666;

       text-decoration:none;

}

a:hover {

       color:#F90;

       text-decoration:underline;

}

a:vistied {

       color:#666;

       text-decoration:none;

}

#tree li {

       color:#666;

       font-size:10px;

       font-family:Arial, Helvetica, sans-serif;

       line-height:180%;

       list-style:none;

}

#tree ul {

       margin-left:16px;

       padding-left:0px;

       display:none;

}

</style>

<script type="text/javascript">

       var lastSubMenuID;

       //记录最后点击的子菜单

       function doRecord(subMenuID) {

              document.getElementById(subMenuID).style.display = "none";

              lastSubMenuID = subMenuID;

       }

       

       //隐藏子菜单

       function hideLastSubMenu() {

              if(lastSubMenuID == undefined || lastSubMenuID == "") {

                     return;

              } else {

                     var lastSubMenu = document.getElementById(lastSubMenuID);

                     lastSubMenu.style.display = "none";

              }

       }

       

       //显示子菜单

       function showSubMenu(subMenuID) {

              if(lastSubMenuID == subMenuID) {

                     if(document.getElementById(lastSubMenuID).style.display == "block") {

                            document.getElementById(lastSubMenuID).style.display = "none";

                            return;

                     }

              }

              

              if(lastSubMenuID == undefined) {

                     doRecord(subMenuID);

              }else{

                     hideLastSubMenu();

                     doRecord(subMenuID);

              }

              changeMenuState(subMenuID);

       }

       

       //改变子菜单的样式

       function changeMenuState(subMenuID) {

              var subMenu = document.getElementById(subMenuID);

              //subMenu.style.filter = "progidXImageTransform.Microsoft.Wipe()";

              //subMenu.filters[0].apply();

              subMenu.style.display = "block";

              //subMenu.filters[0].play();

       }

</script>



</HEAD>

<BODY>

       <ul id="tree">

       <li id="mainMenu1">

       <a href="#" onClick="showSubMenu('main1SubMenu');">Syringes</a>

              <ul id="main1SubMenu">

                     <li><a href="#" class="link1">Safety Syringes</a></li>

                     <li><a href="#" class="link1">0.1ml Safety...</a></li>

                     <li><a href="#" class="link1">0.5ml Safety...</a></li>

              </ul>

       </li>

       

       <li id="mainMenu2">

       <a href="#" onClick="showSubMenu('main2SubMenu');">Moulds</a>

              <ul id="main2SubMenu">

                     <li><a href="#" class="link1">Hot Runner...</a></li>

                     <li><a href="#" class="link1">Semi-Hot...</a></li>

                     <li><a href="#" class="link1">Cold Runner...</a></li>

              </ul>

       </li>

       

       <li id="mainMenu3">

       <a href="#" onClick="showSubMenu('main3SubMenu');">Moulds</a>

              <ul id="main3SubMenu">

                     <li><a href="#" class="link1">Hot Runner...</a></li>

                     <li><a href="#" class="link1">Semi-Hot...</a></li>

                     <li><a href="#" class="link1">Cold Runner...</a></li>

              </ul>

       </li>

       <li id="mainMenu4">

       <a href="#" onClick="showSubMenu('main4SubMenu');">Moulds</a>

              <ul id="main4SubMenu">

                     <li><a href="#" class="link1">Hot Runner...</a></li>

                     <li><a href="#" class="link1">Semi-Hot...</a></li>

                     <li><a href="#" class="link1">Cold Runner...</a></li>

              </ul>

       </li>

  </ul>

</BODY>