一个很简单的无限分类树实现代码_导航菜单

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>简单树形</title> <style type="text/css"> * {margin:0px; padding:0px;} #categoryTree {margin:0px; padding:0px;} #categoryTree ul {display:none; margin:0px;margin-left:5px; padding:0px 0px 0px 15px;} #categoryTree span {cursor:pointer;} </style> <script type="text/javascript"> window.onload = function() { var cate = document.getElementById("categoryTree"); var bBs = cate.getElementsByTagName("span"); var len = bBs.length; if (len > 0) { for (var i=0; i < len;i++) { var oTag = bBs[i].parentNode.getElementsByTagName("ul")[0]; if (oTag) { bBs[i].style.background = "#666"; bBs[i].onclick = function() { var oTag = this.parentNode.getElementsByTagName("ul")[0]; if (!(oTag.open)) { oTag.style.display = "block"; oTag.open = true; } else { oTag.style.display = "none"; oTag.open = null; } } } } } else { throw new Error("html struct error!"); } } </script> <ul id="categoryTree"> <li> <span>国务院</span> <ul> <li> <span>省级办公单位</span> <ul> <li><span>安徽</span></li> <li> <span>河南省</span> <ul> <li><span>阜阳市</span></li> <li><span>界首市</span></li> </ul> </li> <li><span>河北省</span></li> <li><span>广东省</span></li> </ul> </li> <li> <span>省级办公单位2</span> <ul> <li>范冰冰2</li> <li> <span>范冰冰4</span> <ul> <li>某导演</li> <li>某导演</li> <li>某导演</li> <li>某导演</li> <li>某导演</li> <li>某导演</li> <li>某导演</li> <li>某导演</li> <li>某导演</li> <li>某导演</li> <li>某导演</li> <li>某导演</li> <li>某导演</li> <li>某导演</li> </ul> </li> <li>范冰冰2</li> <li>范冰冰2</li> </ul> </li> <li>省级办公单位3</li> <li>省级办公单位4</li> </ul> </li> <li> </li> <li> <span>国务院</span> <ul> <li> <span>省级办公单位</span> <ul> <li><span>安徽</span></li> <li> <span>河南省</span> <ul> <li><span>阜阳市</span></li> <li><span>界首市</span></li> </ul> </li> <li><span>河北省</span></li> <li><span>广东省</span></li> </ul> </li> </ul> </li> <li> </li> </ul>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]