首頁 > 開發者 > JavaScript
沒有圖片,沒有外部的js檔案,沒有css檔案,只有一個52行的html檔案.不過可擴充性很好,你可以輕易加片和超連結.
修改自 Marcelo Franco的版本,他的版本使用了table並且假定div只能用於tree menu.按照現代的web編程慣例不一定是可接受的.據Marcelo Franco說適用的瀏覽器是 Microsoft Internet Explorer 4+, Netscape 4+, etc.),我在我的瀏覽器上(IE6,opera8.52, firefox1.5)測了下我的簡化版本,好像也沒有什麼問題.
以下就是全部的原始碼
<html><head><title>Tree Menu</title></head><script language="javascript" type="text/javascript"><!--function tog(item){ obj=document.getElementById(item); visible=(obj.style.display!="none"); key=document.getElementById("x" + item); if (visible) { obj.style.display="none"; key.innerHTML="+"; } else { obj.style.display="block"; key.innerHTML="-"; }} function expall(item,yes){ obj=document.getElementById(item); arr=obj.getElementsByTagName("UL"); for (i=0;i<arr.length;i++) { key=document.getElementById("x" + arr[i].id); if(yes){ arr[i].style.display="block"; key.innerHTML="-"; }else{ arr[i].style.display="none"; key.innerHTML="+"; } }}//--></script><div id='tree'><a id='xall' href="javascript:tog('all');">+</a><ul id='all' style="display:none;"><li>child1</li><li ><a id='xfather' href="javascript:tog('father');">+</a>father<ul id='father' style="display:none;"><li>child2</li><li>child3</li> </ul></li></ul></div><p><a href="javascript:expall('tree',1);">Expand All</a> -- <a href="javascript:expall('tree',0);">Collapse All</a></p><p>Extended from <a href="http://www.codeproject.com/jscript/treemenu.asp">Marcelo Franco</a>'s tree menu.</p></body></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
