没有图片,没有外部的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>