<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title>Tree Menu</title> </head> <body> <divclass="lmenu"> <ul> <liaid="26"> <span> <emclass="icoopen"></em> 一级标题 </span> <ulstyle="display: none;"> <liaid="27"> <emclass="iconleaf"></em> 二级标题 </li> <liaid="28"> <emclass="iconleaf"></em> 二级标题 </li> <liaid="29"> <emclass="iconleaf"></em> 二级标题 </li> </ul> </li> <liaid="1"> <span> <emclass="icoclose"></em> 一级标题 </span> <ulstyle="display: block;"> <liaid="4"> <emclass="iconleaf"></em> 二级标题 </li> <liaid="2"> <emclass="iconleaf"></em> 二级标题 </li> <liaid="8"> <span> <emclass="icoclose2"></em> 二级标题 </span> <ul> <liaid="10"> <emclass="iconleaf2"></em> 三级标题 </li> <liaid="3"> <emclass="iconleaf2"></em> 三级标题 </li> </ul> </li> <liaid="5"> <span> <emclass="icoclose2"></em> 二级标题 </span> <ul> <liaid="7"> <emclass="iconleaf2"></em> 三级标题 </li> <liaid="6"> <emclass="iconleaf2"></em> 三级标题 </li> </ul> </li> </ul> </li> <liaid="11"> <span> <emclass="icoclose"></em> 一级标题 </span> <ul> <liaid="17"> <span> <emclass="icoclose2"></em> 二级标题 </span> <ul> <liaid="25"> <emclass="iconleaf2"></em> 三级标题 </li> <liaid="23"> <emclass="iconleaf2"></em> 三级标题 </li> <liaid="22"> <emclass="iconleaf2"></em> 三级标题 </li> </ul> </li> <liaid="12"> <span> <emclass="icoclose2"></em> 二级标题 </span> <ul> <liaid="15"> <emclass="iconleaf2"></em> 三级标题 </li> <liaid="16"> <emclass="iconleaf2"></em> 三级标题 </li> <liaid="14"> <emclass="iconleaf2"></em> 三级标题 </li> </ul> </li> </ul> </li> </ul> </div> <style> *{ margin: 0; padding: 0; } .icoopen , .icoopen2 , .icoclose , .icoclose2 , .iconleaf , .iconleaf2 ,.lmenuullispan ,.search-sidebutton{background: url("doc.png") no-repeat00;width: 9px;height: 9px;top: 9px;} .lmenuli{list-style: none;} .lmenuem {display: block;position: absolute;cursor: pointer;} .icoopen{left: 28px;background-position: 0-39px;} .icoopen2{left: 42px;background-position: -46px-88px;} .icoclose{left: 28px;background-position: -45px-39px;} .icoclose2{left: 42px;background-position: 0-88px;} .iconleaf , .iconleaf2{width: 3px;height: 5px;background-position: -87px-41px;} .iconleaf {left: 47px;top: 11px;} .iconleaf2 {left: 72px;top: 10px;} .search-side{ width: 250px; border-radius: 5px; position: relative; background-color: #FFFFFF; border: 1pxsolid#ddd; height: 36px; line-height: 36px; } .search-sidebutton{ background-position: 00; border: 0none; cursor: pointer; display: block; height: 16px; width: 16px; position: relative; left: 11px; } .search-boxinput{ position: absolute; top: 11px; background-color: transparent; border: mediumnone; color: #AFB0B0; height: 16px; margin-left: 37px; outline: mediumnone; width: 200px; } .lmenu{ width: 250px; height: auto; overflow: hidden; font-family: "宋体",Tahoma, Helvetica, "Microsoft Yahei", "微软雅黑", Arial, STHeiti; margin-bottom: 10px; border: 1pxsolid#ddd; border-radius: 5px; } .lmenuulli{ position: relative; cursor: pointer; } .lmenuulliul{ max-height: 350px; overflow: auto; } .lmenuulliulliul{ height: auto; } .lmenuullispan{ display: block; width: 100%; height: 28px; line-height: 28px; text-indent: 3em; /*font-weight: bolder;*/ font-size: 14px; color: #0E3E5E; border-bottom: 1pxsolid#D7D7D7; background-position: -46px0; } .lmenuulliulli , .lmenuulliullispan{ /*background-color: #F7F8F8;*/ background-color: #FFFFFF; color: #333; text-indent: 5em; font-size: 13px; height: auto; line-height: 28px; } .lmenuulliullispan{ background:none; } .lmenuulliulliulli{ border:none; text-indent: 7em; font-size: 12px; font-weight: normal; height: 24px; line-height: 24px; } </style> <scripttype="text/javascript"src="jquery-3.2.1.js"></script> <script> $(function() { loadMenu(function (id){ // window.location= "";此处指定关于aid的链接 }); }); /*传入一个函数参数为 id 即li上的属性 aid*/ functionloadMenu (fun_clickAction) { /*事件回调函数*/ clickAction = fun_clickAction; /*一级菜单的样式*/ $(".lmenu > ul > li > span").prepend('<em class="icoclose"></em>'); /*二级菜单的样式*/ $(".lmenu > ul > li > ul > li").each(function(){ /*检查是否有节点*/ span =$(this).find("span"); if ( span.length ){ //有节点的话 span.prepend('<em class="icoclose2"></em>'); }else{ //无节点的话,绑定事件 $(this).prepend('<em class="iconleaf"></em>') .click(function(){ clickAction($(this).attr('aid')); }); } }); /*三级菜单的样式*/ $(".lmenu > ul > li > ul > li > ul > li") .prepend('<em class="iconleaf2"></em>') .click(function(){ clickAction($(this).attr('aid')); }); $(".lmenu ul li span").click(function(){ var ye =$(this).find('em'); classNama = ye.attr("class"); if( classNama =='icoclose'){ye.attr('class','icoopen');} elseif( classNama =='icoopen' ){ye.attr('class','icoclose');} elseif( classNama =='icoclose2'){ye.attr('class','icoopen2');} elseif( classNama =='icoopen2' ){ye.attr('class','icoclose2');} $(this).siblings("ul").slideToggle("normal","swing"); }); } </script> </body> </html>