简单树形
国务院 省级办公单位 安徽河南省 阜阳市界首市河北省广东省省级办公单位2 范冰冰2范冰冰4 某导演某导演某导演某导演某导演某导演某导演某导演某导演某导演某导演某导演某导演某导演范冰冰2范冰冰2省级办公单位3省级办公单位4 国务院 省级办公单位 安徽河南省 阜阳市界首市河北省广东省 代码 <! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " > < html > < meta http - equiv = " Content-Type " content = " text/html; charset=utf-8 " /> < title > 简单树形 </ title > < head > < 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 > </ head > < body > < 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 > < 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 > </ ul > </ body > </ html >
转载于:https://www.cnblogs.com/daxiami/archive/2010/11/18/1880480.html
