急！！！菜单的名称如何写成可重用的啊？

代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<head>
<script>
if (!document.getElementById)
    document.getElementById = function() { return null; }function initializeMenu(menuId, actuatorId) {
    var menu = document.getElementById(menuId);
    var actuator = document.getElementById(actuatorId);    if (menu == null || actuator == null) return;    //if (window.opera) return; // I'm too tired    actuator.parentNode.style.backgroundImage = "url(你的图片地址)";
    actuator.onclick = function() {
        var display = menu.style.display;
        this.parentNode.style.backgroundImage =
            (display == "block") ? "url(你的图片地址)" : "url(你的图片地址)";
        menu.style.display = (display == "block") ? "none" : "block";        return false;
    }
}
 window.onload = function() {
            initializeMenu("productsMenu", "productsActuator");
            initializeMenu("newPhonesMenu", "newPhonesActuator");
            initializeMenu("compareMenu", "compareActuator");
        }function checkAll(e, itemName)
{
  var aa = document.getElementsByName(itemName);
  for (var i=0; i<aa.length; i++)
   aa[i].checked = e.checked;
}
function checkItem(e, allName)
{
  var all = document.getElementsByName(allName)[0];
  if(!e.checked) all.checked = false;
  else
  {
    var aa = document.getElementsByName(e.name);
    for (var i=0; i<aa.length; i++)
     if(!aa[i].checked) return;
    all.checked = true;
  }
}
</script>
<style>
body {
  font-family: verdana, helvetica, arial, sans-serif;
}#mainMenu {
  background-color: #EEE;
  border: 1px solid #CCC;
  color: #000;
  width: 203px;
}#menuList {
  margin: 0px;
  padding: 10px 0px 10px 15px;
}li.menubar {
  background: url(你的图片地址) no-repeat 0em 0.3em;
  font-size: 12px;
  line-height: 1.5em;
  list-style: none outside;
}.menu, .submenu {
  display: none;
  margin-left: 15px;
  padding: 0px;
}.menu li, .submenu li {
  background: url(你的图片地址) no-repeat 0em 0.3em;
  list-style: none outside;
}a.actuator {
  background-color: transparent;
  color: #000;
  font-size: 12px;
  padding-left: 15px;
  text-decoration: none;
}a.actuator:hover {
  text-decoration: underline;
}.menu li a, .submenu li a {
  background-color: transparent;
  color: #000;
  font-size: 12px;
  padding-left: 15px;
  text-decoration: none;
}.menu li a:hover, submenu li a:hover {
  /*border-bottom: 1px dashed #000;*/
  text-decoration: underline;
}span.key {
  text-decoration: underline;
}
</style>
</head>
<body>
<div id="mainMenu">
      <ul id="menuList">
        <li class="menubar">
<input type=checkbox name=mmAll onclick="checkAll(this, 'mm')">
          <a href="#" id="productsActuator" class="actuator">主菜单</a>
          <ul id="productsMenu" class="menu">
            <li>
<input type=checkbox name=mm onclick="checkItem(this, 'mmAll')">
              <a href="#" id="newPhonesActuator" class="actuator">子菜单1</a>
              <ul id="newPhonesMenu" class="submenu">

                <li><input type=checkbox name=mm value=c onclick="checkItem(this, 'mmAll')"><a href="#">三级菜单</a></li>

                <li><input type=checkbox name=mm  value=d onclick="checkItem(this, 'mmAll')"><a href="#">三级菜单</a></li>
               
              </ul>
            </li>
            <li>
<input type=checkbox name=mm value=b onclick="checkItem(this, 'mmAll')">
              <a href="#" id="compareActuator" class="actuator">子菜单2</a>
              <ul id="compareMenu" class="submenu">
                <li><input type=checkbox name=mm value=e onclick="checkItem(this, 'mmAll')"><a href="#">三级菜单</a></li>
                <li><input type=checkbox name=mm value=f onclick="checkItem(this, 'mmAll')"><a href="#">三级菜单</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </body></html>将‘主菜单’及其‘子菜单’那些字段写成动态的，也就是可重用的呀，帮忙啊！
谢谢啊！

解决方案 »

  1.   

    就是写成可重用的，那几个字段用例如：DOCUMENT.WRITE()这种方式写成 啊，
    但是我没想好怎么写啊！
      

  2.   

    是不是这个意思啊，写了点，不过因为你的函数特别多，没时间看，现在还不能全部通过测试，你可以看着改改，呵呵
    <div id='mainMenu'></div>
    <script language="javascript">
    function createmenu(menuname,gradeidx,hrefstr)
    {
    var htmlstr="";
    if (gradeidx=='0')
    {
    htmlstr="<ul id='menuList'>\n<li class='menubar'>\n<input type=checkbox name=mmAll onclick=checkAll(this, 'mm')>\n<a href='#' id='productsActuator' class='actuator'>"+menuname+"</a>\n<ul id='productsMenu' class='menu'></ul>\n</li>\n</ul>";
    document.all.mainMenu.innerHTML=htmlstr;
    }else if(gradeidx=='1')
    { 
    htmlstr="";
    htmlstr+="<li>\n";
    htmlstr+="<input type=checkbox name='mm' onclick=checkItem(this, 'mmAll')>\n";
    htmlstr+="<a href='#' id='newPhonesActuator' class='actuator'>"+menuname+"</a>\n";
    htmlstr+="<ul id='newPhonesMenu' class='submenu'></ul>\n</li>\n"; /*document.write(" <ul id='productsMenu' class='menu'>");document.write(" <li>");document.write(" <input type=checkbox name='mm' onclick=checkItem(this, 'mmAll')>");document.write(" <a href='#' id='newPhonesActuator' class='actuator'>"+menuname+"</a>"); */
    document.all.productsMenu.innerHTML=htmlstr;
    }else if(gradeidx=='2')
    {
    htmlstr="<li>\n<input type=checkbox name='mm' value=c onclick=checkItem(this, 'mmAll')>\n<a href="+hrefstr+">"+menuname+"</a>\n</li>";
    document.all.productsMenu.innerHTML=htmlstr;
    }
    }
    createmenu(' 主菜单','0','#');
    createmenu(' 一级菜单','1','#');
    createmenu(' 二级菜单','2','#');
    </script>
      

  3.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <head>
    <script>
    if (!document.getElementById)
        document.getElementById = function() { return null; }function initializeMenu(menuId, actuatorId) {
        var menu = document.getElementById(menuId);
        var actuator = document.getElementById(actuatorId);    if (menu == null || actuator == null) return;    //if (window.opera) return; // I'm too tired    actuator.parentNode.style.backgroundImage = "url(你的图片地址)";
        actuator.onclick = function() {
            var display = menu.style.display;
            this.parentNode.style.backgroundImage =
                (display == "block") ? "url(你的图片地址)" : "url(你的图片地址)";
            menu.style.display = (display == "block") ? "none" : "block";        return false;
        }
    }
     window.onload = function() {
          initializeMenu("productsMenu", "productsActuator");
          initializeMenu("newPhonesMenu", "newPhonesActuator");
          initializeMenu("compareMenu", "compareActuator");
          //add by dmhua
          initializeMenu("productsMenu1", "productsActuator1");
          initializeMenu("newPhonesMenu1", "newPhonesActuator1");
          initializeMenu("newPhonesMenu2", "newPhonesActuator1");
          initializeMenu("newPhonesMenu3", "newPhonesActuator1");
          initializeMenu("compareMenu1", "compareActuator1");
    }function checkAll(e, itemName)
    {
      var aa = document.getElementsByName(itemName);
      for (var i=0; i<aa.length; i++)
       aa[i].checked = e.checked;
    }
    function checkItem(e, allName)
    {
      var all = document.getElementsByName(allName)[0];
      if(!e.checked) all.checked = false;
      else
      {
        var aa = document.getElementsByName(e.name);
        for (var i=0; i<aa.length; i++)
         if(!aa[i].checked) return;
        all.checked = true;
      }
    }
    </script>
    <style>
    body {
      font-family: verdana, helvetica, arial, sans-serif;
    }#mainMenu {
      background-color: #EEE;
      border: 1px solid #CCC;
      color: #000;
      width: 203px;
    }#mainMenu1{
      background-color: #EEE;
      border: 1px solid #CCC;
      color: #000;
      width: 203px;
    }#menuList {
      margin: 0px;
      padding: 10px 0px 10px 15px;
    }#menuList1 {
      margin: 0px;
      padding: 10px 0px 10px 15px;
    }
    li.menubar {
      background: url(你的图片地址) no-repeat 0em 0.3em;
      font-size: 12px;
      line-height: 1.5em;
      list-style: none outside;
    }.menu, .submenu {
      display: none;
      margin-left: 15px;
      padding: 0px;
    }.menu li, .submenu li {
      background: url(你的图片地址) no-repeat 0em 0.3em;
      list-style: none outside;
    }a.actuator {
      background-color: transparent;
      color: #000;
      font-size: 12px;
      padding-left: 15px;
      text-decoration: none;
    }a.actuator:hover {
      text-decoration: underline;
    }.menu li a, .submenu li a {
      background-color: transparent;
      color: #000;
      font-size: 12px;
      padding-left: 15px;
      text-decoration: none;
    }.menu li a:hover, submenu li a:hover {
      /*border-bottom: 1px dashed #000;*/
      text-decoration: underline;
    }span.key {
      text-decoration: underline;
    }
    </style>
    </head>
    <body><div id='mainMenu'></div>
    <div id='mainMenu1'></div>
    <span id="content" width="60%"></span>
    </form>
    <script language="javascript">
    function createmenu(fatherdiv,currentdiv,menuid,menuname,gradeidx,hrefstr)
    {
    var htmlstr="";
    var fatherdivobj=eval("document.all."+fatherdiv);
    if (typeof(fatherdivobj.innerHTML)=="string")
    htmlstr=fatherdivobj.innerHTML;
    if (gradeidx=='0')
    {
    htmlstr+="<ul id='"+currentdiv+"'>\n";
    htmlstr+="<li class='menubar'>\n";
    htmlstr+="<input type=checkbox name=mmAll onclick=checkAll(this,'mm')>\n";
    htmlstr+="\n<a href='#' id='"+menuid+"' class='actuator'>"+menuname+"</a>\n";
    htmlstr+="</li>\n";
    htmlstr+="</ul>\n";
    fatherdivobj.innerHTML=htmlstr;
    }else if(gradeidx=='1')
    {
    htmlstr+="<ul id='"+currentdiv+"' class='menu'>\n";
    htmlstr+="<li>\n";
    htmlstr+="<input type=checkbox name='mm' onclick=checkItem(this, 'mmAll')>\n";
    htmlstr+="<a href='#' id='newPhonesActuator' class='actuator'>"+menuname+"</a>\n";
    htmlstr+="</li>\n</ul>\n";
    fatherdivobj.innerHTML=htmlstr;
    //document.all.content.innerText=htmlstr;

    }else if(gradeidx=='2')
    {

    htmlstr+="<ul id='"+currentdiv+"' class='submenu'>\n";
    htmlstr+="<li>\n";
    htmlstr+="<input type=checkbox name='mm' value=c onclick=checkItem(this, 'mmAll')>\n";
    htmlstr+="<a href="+hrefstr+">"+menuname+"</a>\n";
    htmlstr+="</li>\n</ul>\n";
    fatherdivobj.innerHTML=htmlstr;

    }
    }
    createmenu('mainMenu','menuList','productsActuator',' 主菜单','0','#');
    createmenu('menuList','productsMenu','newPhonesActuator',' 一级菜单','1','#');
    createmenu('productsMenu','newPhonesMenu','',' 二级菜单','2','#');

    createmenu('mainMenu1','menuList1','productsActuator1',' 主菜单','0','#');
    createmenu('menuList1','productsMenu1','newPhonesMenu2',' 一级菜单','1','#');</script></body></html>