Javascript, 網頁設計

[JS]符合網頁標準化『樹狀選單 TreeView』

梅干 2008/12/19
  樹狀選單是最常被使用到,此範例在經由男丁格爾的修正下,目前除了支援二大瀏覽器外,還完全符合網頁的標準化,同時此樹狀選單的作法相當容易且好懂,只須短短的12行程式碼即可完成。

放在<head>...</head>之間
function $(_0){
        return document.getElementById(_0);
    }
    function popmenu(tableName,obj){
        if ($(tableName).style.display=="none"){        
            $(tableName).style.display="block";
            $(obj).getElementsByTagName("img")[0].src = “img/open.gif”;
    }else{
            $(tableName).style.display=”none”;    
            $(obj).getElementsByTagName(”img”)[0].src = “img/close.gif”;
        }
    }    

放在<body>...</body>之間:(item)
<div class="item"> 
 <a href="javascript:popmenu('DetailItem1','item1');" id="item1">
 <img src="img/close.gif" border="0"> Item</a>
</div>

放在<body>...</body>之間:(detailItem)
 <div class="detailItem"  id="DetailItem1" style="display:none;"> 
  ‧<a href="#">DetailItem01</a> 
  ‧<a href="#">DetailItem02</a> 
  ‧<a href="#">DetailItem03</a>
 </div>

  範例中只作了一層,若要多層,只要更改<a href="javascript:popmenu('DetailItem2','item2');" id="item2"><div class="detailItem" id="DetailItem2" style="display:none;">即可,依此類推,但勿必注意到item2的id="item2",DetailItem2的 id="DetailItem2"兩兩一組,名稱要一樣。
[範例預覽]