javascript 静态树菜单实现代码

谁有兴趣的话可以改成动态加载数据，或者用jquery，代码肯定会少很多！我发现添加一些css，这棵树在静态页面还是大有用途的！

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> .expand{ cursor:pointer; } .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 = "田" + o.textContent.substring（1）; else o.innerText = "田" + 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 = "曰" + o.textContent.substring（1）; else o.innerText = "曰" + 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 = "曰" + dts[i].textContent; else dts[i].innerText = "曰" + dts[i].innerText; dts[i].onclick = function（） { toggleChild（this）; }; } } window.onload = function（） { maketree（document.getElementById（"tree"））; }; </script> </head> <body> <h3>定义列表也能变成一棵树：</h3> <dl id="tree"> <dt>菜单1</dt> <dd>1.1 aaa</dd> <dd>1.2 bbb</dd> <dd>1.3 ccc</dd> <dt>菜单2</dt> <dd>2.1 你好</dd> <dd>超链接</dd> <dt>菜单3</dt> <dd> <dl style="margin-top:2px; margin-bottom:2px;"> <dt>3.1</dt> <dd>百度新闻</dd> <dd>搜狐新闻</dd> <dt>3.2</dt> <dd>百度新闻</dd> <dd>搜狐新闻</dd> </dl> </dd> </dl> </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]