Who is interested can be changed to dynamic loading data, or with jquery, the code will certainly be much less! I found that adding some CSS, this tree on the static page is still very useful!
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <style type=" Text/css ">. expand{cursor:po Inter }. hide{Cursor:pointer; } </style> <script type= "Text/javascript" > Function Togglechild (o) {var cls = O.getattribute ("class"); if (CLS = = "expand") {var sb = o.nextsibling; if (window.innerwidth) sb = sb.nextsibling; while (SB!= null && sb.tagName.toLowerCase () = = ' dd ') {sb.style.display = ' none '; SB = sb.nextsibling; if (window.innerwidth) sb = sb.nextsibling; } o.removeattribute ("class"); O.setattribute ("Class", "Hide"); if (window.innerwidth)//ff o.textcontent = "Field" + o.textcontent.substring (1); else O.innertext = "Tian" + o.innertext.substring (1); else {var sb = o.nextsibling; if (window.innerwidth) sb = sb.nextsibling; while (SB!= null && sb.tagName.toLowerCase () = = ' dd ') {sb.style.display = ""; SB = sb.nextsibling; if (window.innerwidth) sb = sb.nextsibling; } o.removeattribute ("class"); O.setattribute ("Class", "expand"); if (window.innerwidth)//ff o.textcontent = "Yue" + o.textcontent.substring (1); else O.innertext = "Yue" + o.innertext.substring (1); } function Maketree (obj) {var DTS = obj.getelementsbytagname (' dt '); for (var i = 0; i < dts.length i++) {Dts[i].setattribute ("Class", "expand"); if (window.innerwidth)//ff dts[i].textcontent = "Yue" + dts[i].textcontent; else Dts[i].innertext = "Yue" + dts[i].innertext; Dts[i].onclick = function () {togglechild (this); } window.onload = function () {Maketree (document.getElementById ("tree")); }; </script> </pead> <body> <p> definition list can also become a tree:</p> <dl id= "Trees" > <dt> menu 1</ dt> <dd>1.1 aaa</dd> <dd>1.2 bbb</dd> <dd>1.3 <dt> Menu ccc</dd> ; <dd>2.1 Hello </dd><dd> Hyperlinks </dd> <dt> menus 3</dt> <dd> <dl > <dt>3.1</dt> <dd> Baidu News < /dd> <dd> Sohu News </dd> <dt>3.2</dt> <dd> Baidu News </dd> <dd> Sohu News </dd> < /dl> </dd> </dl> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
