超簡單實用的豎形二級菜單(JS)


<script language="javascript">
    function change_view(obj_name)
    {
        var aa=document.getElementById(obj_name);
        if(aa.style.display=="")
        {
            aa.style.display="none";
        }
        else
        {
            aa.style.display="";
        }
    }
</script>

<table width="160" border="1">
      <tr onClick="change_view('a1')">
        <td>●樹形菜單根目錄1</td>
      </tr>
     <tr id="a1"style="display:none">   <!-- 如果想一打開網頁菜單就是展開的,此處刪除none--->
        <td>
            <table width="143" border="0">
                  <tr>
                    <td width="28">&nbsp;</td>
                    <td width="105">二級菜單1</td>
                  </tr>
                  <tr>
                    <td>&nbsp;</td>
                    <td>二級菜單2</td>
                  </tr>
                  <tr>
                    <td>&nbsp;</td>
                    <td>二級菜單3</td>
                  </tr>
            </table>
        </td>
  </tr>
 
 
    <tr onClick="change_view('a2')">
        <td>●樹形菜單根目錄2</td>
      </tr>
      <tr id="a2"style="display:none">
        <td>
            <table width="143" border="0">
                  <tr>
                    <td width="28">&nbsp;</td>
                    <td width="105">二級菜單1</td>
                  </tr>
                  <tr>
                    <td>&nbsp;</td>
                    <td>二級菜單2</td>
                  </tr>
                   <tr>
                    <td>&nbsp;</td>
                    <td>二級菜單3</td>
                   </tr>
            </table>
        </td>
  </tr>
 
 
    <tr onClick="change_view('a3')">
        <td>●樹形菜單根目錄3</td>
      </tr>
      <tr id="a3"style="display:none">
            <td>
            <table width="143" border="0">
                  <tr>
                    <td width="28">&nbsp;</td>
                    <td width="105">二級菜單1</td>
                  </tr>
                  <tr>
                    <td>&nbsp;</td>
                    <td>二級菜單2</td>
                  </tr>
                  <tr>
                    <td>&nbsp;</td>
                    <td>二級菜單3</td>
                  </tr>
            </table>
        </td>
  </tr>
 </table>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章