实用的多级树形展开菜单效果代码

软件编程
2026-01-11 10:58:01

<!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>校讯通</label> <ul class="two"> <li> <label>沈阳市</label> <ul class="two"> <li> <label><input type="checkbox" value="123456">二小</label> <ul class="two"> <li><label><input type="checkbox" value="123456">二年级</label></li> <li> <label><input type="checkbox" value="123456">三年级</label> <ul class="two"> <li> <label><input type="checkbox" value="123456">一班</label> <ul class="two"> <li><label><input type="checkbox" value="123456">张三</label></li> <li><label><input type="checkbox" value="123456">王五</label></li> </ul> </li> <li><label><input type="checkbox" value="123456">实验班</label></li> </ul> </li> </ul> </li> </ul> </li> <li> <label>抚顺市</label> <ul class="two"> <li><label><input type="checkbox" value="123456">二小</label></li> <li><label><input type="checkbox" value="123456">一中</label></li> </ul> </li> </ul> </li> </ul>  </body> </html>