哪位朋友发一个树状的切换菜单

不是水面菜单。而是垂直菜单。
就是默认第一个是展开的。
然后点击其他第一个就隐藏了。并显示出被点击的那个子菜单

解决方案 »

  1.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script language="javascript" type="text/javascript">
    function $(id){return document.getElementById(id)}
    function showNav(num){var tags=$("Menu").getElementsByTagName("dd");for (i=0; i<tags.length; i++){if (i==num){if (tags[i].className!="on"){tags[i].className="on";}else{tags[i].className=""; }}else{tags[i].className="";}}}
    </script>
    <style>
    #Menu{
    display:block;
    list-style-type:none;
    margin:0px;
    padding:0px;
    overflow:hidden;
    width:151px;
    }
    #Menu dt{
    display:block;
    overflow:hidden;
    margin:0px;
    padding:0px;
    text-align:center;
    line-height:28px;
    height:28px;
    font-size:12px;
    color:#95D6E4;
    background:#333333;
    }
    #Menu dd{
    margin:0px 0px 1px 0px;
    padding:0px;
    width:151px;
    text-align:center;
    line-height:21px;
    background:#95D6E4;
    display:block;
    }
    #Menu dd a{
    margin:0px;
    padding:0px;
    display:block;
    color:#FFFFFF;
    text-decoration:none;
    }
    #Menu dd ul{
    display:none;
    background:#FFFFFF;
    }
    #Menu dd.on ul{
    display:block;
    overflow:hidden;
    margin:0px;
    padding:2px 0px;
    border:1px solid #95D6E4;
    text-align:left;
    width:149px;
    }
    #Menu dd.on ul li{
    background:#EFEFEF;
    margin:2px 5px;
    padding:0px; 
    display:block;
    overflow:hidden;
    height:20px;
    }
    #Menu dd.on ul li a{
    display:block;
    color:#033D61;
    padding:4px 3px;
    line-height:12px;
    height:12px;
    }
    #Menu dd.on ul li a:hover{
    padding:3px 2px;
    border:1px solid #95D6E4;
    }
    </style>
    </head><body>
          <dl id="Menu">
          <dt>管理菜单</dt>
      <dd class="on">
          <a href="javascript:void(0)" onClick="showNav(0);">一级菜单一</a>
      <ul>
         <li><a href="#">子菜单一１</a></li>
     <li><a href="#">子菜单一２</a></li>
     <li><a href="#">子菜单一３</a></li>
     <li><a href="#">子菜单一４</a></li>
      </ul>
      </dd>
      <dd>
          <a href="javascript:void(0)" onClick="showNav(1);">一级菜单一</a>
      <ul>
         <li><a href="#">子菜单二１</a></li>
     <li><a href="#">子菜单二２</a></li>
     <li><a href="#">子菜单二３</a></li>
     <li><a href="#">子菜单二４</a></li>
      </ul>
      </dd>
      </dl>
    </body>
    </html>
      

  2.   

    楼上的这位大哥为什么还要上面这样写函数啊 ？
    我下面的这样写不是一样吗？
    function showNav(num){
    var tags=document.getElementById("Menu").getElementsByTagName("dd");
    for (i=0; i<tags.length; i++){
    if (i==num){
    if (tags[i].className!="on"){
    tags[i].className="on";
    }
    else{
    tags[i].className=""; 
    }
    }else{
    tags[i].className="";
    }
    }
    }
      

  3.   

    一样的，写function $(id){return document.getElementById(id)}是为了以后你在其它地方需要使用document.getElementById时直接用$(id名)就可以了，这样可以少写好多字，比较方便