放在＜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"兩兩一組，名稱要一樣。
[範例預覽]