實用的多級樹形展開菜單效果代碼

更新時間：2010年10月31日 21:31:17 作者：

實用的多級樹形展開菜單，相信它支持的級別會讓您滿意，開始我還以為它是無限級的呢？希望這個菜單對大家有幫助哦。

<!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> <title>實用的多級樹形展開菜單</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> body{margin:0;padding:0;font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif;} ul,li,{margin:0;padding:0;} ul{list-style:none;} #root{margin:10px;width:200px;overflow:hidden;} #root li{line-height:25px;} #root .rem{padding-left:16px;} #root .add{background:url(/upload/201010/20101031213041133.gif) -4px -31px no-repeat;} #root .ren{background:url(/upload/201010/20101031213041133.gif) -4px -7px no-repeat;} #root li a{color:#666666;padding-left:5px;outline:none;blr:expression(this.onFocus=this.blur());} #root li input{vertical-align:middle;margin-left:5px;} #root .two{padding-left:20px;display:none;} </style> </head> <body> <ul id="root"> <li> <label><a href="javascript:;">校訊通</a></label> <ul class="two"> <li> <label><a href="javascript:;">沈陽市</a></label> <ul class="two"> <li> <label><input type="checkbox" value="123456"><a href="javascript:;">二小</a></label> <ul class="two"> <li><label><input type="checkbox" value="123456"><a href="javascript:;">二年級</a></label></li> <li> <label><input type="checkbox" value="123456"><a href="javascript:;">三年級</a></label> <ul class="two"> <li> <label><input type="checkbox" value="123456"><a href="javascript:;">一班</a></label> <ul class="two"> <li><label><input type="checkbox" value="123456"><a href="javascript:;">張三</a></label></li> <li><label><input type="checkbox" value="123456"><a href="javascript:;">王五</a></label></li> </ul> </li> <li><label><input type="checkbox" value="123456"><a href="javascript:;">實驗班</a></label></li> </ul> </li> </ul> </li> </ul> </li> <li> <label><a href="javascript:;">撫順市</a></label> <ul class="two"> <li><label><input type="checkbox" value="123456"><a href="javascript:;">二小</a></label></li> <li><label><input type="checkbox" value="123456"><a href="javascript:;">一中</a></label></li> </ul> </li> </ul> </li> </ul>  </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: