html <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery分类树形菜单插件代码 </title> <link rel="stylesheet" type="text/css" href="css/SimpleTree.css"/> <script type="text/javascript" src="js/jquery-1.6.min.js"></script> <script type="text/javascript" src="js/SimpleTree.js"></script> <script type="text/javascript"> $(function(){ $(".st_tree").SimpleTree({ /* 可无视代码部分*/ click:function(a){ if(!$(a).attr("hasChild")) alert($(a).attr("ref")); } }); }); </script> </head> <body> <div class="st_tree" style="width:400px;margin:0 auto;"> <ul> <li><a href="#" ref="hyjm">欢迎界面</a></li> <li><a href="#" ref="xtgl">系统管理</a></li> <ul show="true"> <li><a href="#" ref="yhgl">用户管理</a></li> <li><a href="#" ref="rzck">日志查看</a></li> </ul> <li><a href="#" ref="ckgl">仓库管理</a></li> <ul> <li><a href="#" ref="kcgl">库存管理</a></li> <li><a href="#" ref="shgl">收货管理</a></li> <li><a href="#" ref="fhgl">发货管理</a></li> <ul> <li><a href="#" ref="yhgl">用户管理</a></li> <li><a href="#" ref="rzck">日志查看</a></li> </ul> </ul> </ul> </div> </body> </html>自定义样式：
@charset "utf-8"; .st_tree{padding:10px;} /* 超链接 */ .st_tree a{text-decoration:none;} /* 鼠标经过的超链接 */ .st_tree a:hover{color:#f33;text-decoration:underline;} /* 菜单 */ .st_tree ul{padding:0 18px;margin:0;} /* 菜单项 */ .st_tree ul li{font-size:13px;color:#222;line-height:18px;cursor:pointer;list-style:none;background:url(imgs/st_node.gif);background-repeat:no-repeat;padding:0 0 3px 20px;} /* 子菜单 */ .st_tree ul li ul{} /* 子菜单项 */ .st_tree ul li ul li{} /* 子菜单的父节点 */ .st_tree .folder{list-style-image:url(imgs/st_icon.png);background:url(imgs/st_folder.gif);background-repeat:no-repeat;padding:0 0 0 20px;} /* 展开的父节点 */ .st_tree .open{list-style-image:url(imgs/st_icon_open.png);background:url(imgs/st_folder_open.gif);background-repeat:no-repeat;padding:0 0 0 20px;}
目录结构
