JS折叠菜单问题。

我网上找了一个JS折叠菜单。经过大家的帮助。已经改的很好用了。
但是我还想进一步改造一下。现在是单击一次打开一个折叠子菜单。再单击一次收拢子菜单。我想改为。
假如一个页面上。有多个子菜单。
单击打开一个折叠子菜单。单击下一个折叠子菜单的时候。刚刚打开的子菜单自动收拢，下一个子菜单打开。不知道我表达的清楚不清楚。代码如下。<SCRIPT LANGUAGE="JavaScript">
function ShowSub(theId)  
{
  var theFo = document.getElementById("fold_" + theId);
  theFo.style.display = theFo.style.display == "none"?"block":"none";
  for (var i = 0; i < 7; i++) 
  {
    if (i == theId)
    continue;
    theFo = document.getElementById("tr_" + i);
    theFo.style.display = "none";
  }
}
//-->
</SCRIPT>
<div class="title_a"> &nbsp;&nbsp; <a href="javascript:ShowSub('000')"> 页面设置 </a></div>
<div id='fold_000'><div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>
</div>
<div class="title_a"> &nbsp;&nbsp; <a href="javascript:ShowSub('001')"> 用户管理 </a></div>
<div id='fold_001'><div>123</div>
<div>123</div>
<div>123</div>
</div><div class="title_a"> &nbsp;&nbsp; <a href="javascript:ShowSub('002')"> 回收站 </a></div>
<div id='fold_002'><div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>
</div>
</div>

解决方案 »

  1.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    </head>
    <body>
    <div class="title_a"> &nbsp;&nbsp; <a href="javascript:ShowSub('000')"> 页面设置 </a></div>
    <div id='fold_000'>

    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    </div>
    <div class="title_a"> &nbsp;&nbsp; <a href="javascript:ShowSub('001')"> 用户管理 </a></div>
    <div id='fold_001'>

    <div>123</div>
    <div>123</div>
    <div>123</div>
    </div>

    <div class="title_a"> &nbsp;&nbsp; <a href="javascript:ShowSub('002')"> 回收站 </a></div>
    <div id='fold_002'>

    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    </div>
    </div>
    </body>
    <SCRIPT LANGUAGE="JavaScript">
    function ShowSub(theId)   
    {
      var theFo = document.getElementById("fold_" + theId);
      theFo.style.display = theFo.style.display == "none"?"block":"none";
      
      for(var j=0; j<=2; ++j) {
       var str = '00' + j;
    if(theId != str) {//如果不是当前所点击的菜单，则让它们关闭
    var foldId = document.getElementById('fold_' + str);
    foldId.style.display = 'none';
    }
     
      }
      for (var i = 0; i < 7; i++)  
      {
      if (i == theId)
      continue;
      theFo = document.getElementById("tr_" + i);
      theFo.style.display = "none";
      }
    }//-->
    </SCRIPT></html>
    不知道是不是这个样子的