资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
js无限级折叠菜单精简版
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>无限级折叠菜单 1.01 JS版</title> <meta name="keywords" content="hj1227 原创无限级折叠菜单 1.01js版"> <meta name="description" content="hj1227 原创无限级折叠菜单 1.01js版"> <style> <!-- body,ul,h3 {margin:0px; padding:0px;} li {list-style-type:none;} body{ font-size:12px; color:#333; font-family: Simsun; line-height:15px; } a{text-decoration:none;color:#004285;border:none;} a:hover{text-decoration:none;color:#C33;} #menu { width:260px; margin:50px auto; padding:10px; border:#EEE 1px solid; } #menu h3 { font-size:12px; } #menu ul { background:url("http://demo.glzy8.com/js/2011/caidan/ul-bg.gif") repeat-y 5px 0px; overflow:hidden; } #menu ul li { padding:5px 0 2px 15px; background:url("http://demo.glzy8.com/js/2011/caidan/tree-ul-li.gif") no-repeat 5px -32px; } #menu ul li ul {display:none;} #menu ul li em { cursor:pointer; display:inline-block; width:15px; float:left; height:15px; margin-left:-14px; background:url("http://demo.glzy8.com/js/2011/caidan/tree-ul-li.gif") no-repeat -32px 2px; } #menu ul li em.off { background-position: -17px -18px; } #menu ul li#end { background-color:#FFF; } #menu ul.off { display:block; } --> </style> </head> <body> <div id="menu"> <h3>无限级折叠菜单 1.0.1 JS版</h3> <ul> <li><em></em><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_1_1</a> <ul> <li><em></em><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_2_1</a> <ul> <li><em></em><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_3_1</a> <ul> <li><em></em><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_4_1</a> <ul> <li><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_5_2</a></li> </ul> </li> <li id='end'><em></em><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_4_2</a> <ul> <li><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_5_2</a></li> </ul> </li> </ul> </li> <li id='end'><em></em><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_3_2</a> <ul> <li><em></em><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_4_1</a> <ul> <li><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_5_2</a></li> </ul> </li> <li id='end'><em></em><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_4_2</a> <ul> <li><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_5_2</a></li> </ul> </li> </ul> </li> </ul> </li> <li id='end'><em></em><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_2_2</a> <ul> <li><em></em><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_3_1</a> <ul> <li><em></em><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_4_1</a> <ul> <li><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_5_2</a></li> </ul> </li> <li id='end'><em></em><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_4_2</a> <ul> <li><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_5_2</a></li> </ul> </li> </ul> </li> <li id='end'><em></em><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_3_2</a> <ul> <li><em></em><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_4_1</a> <ul> <li><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_5_2</a></li> </ul> </li> <li id='end'><em></em><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_4_2</a> <ul> <li><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_5_2</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li id='end'><em></em><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_1_2</a> <ul> <li><em></em><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_2_1</a> <ul> <li><em></em><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_3_1</a> <ul> <li><em></em><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_4_1</a> <ul> <li><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_5_2</a></li> </ul> </li> <li id='end'><em></em><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_4_2</a> <ul> <li><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_5_2</a></li> </ul> </li> </ul> </li> <li id='end'><em></em><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_3_2</a> <ul> <li><em></em><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_4_1</a> <ul> <li><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_5_2</a></li> </ul> </li> <li id='end'><em></em><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_4_2</a> <ul> <li><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_5_2</a></li> </ul> </li> </ul> </li> </ul> </li> <li id='end'><em></em><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_2_2</a> <ul> <li><em></em><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_3_1</a> <ul> <li><em></em><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_4_1</a> <ul> <li><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_5_2</a></li> </ul> </li> <li id='end'><em></em><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_4_2</a> <ul> <li><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_5_2</a></li> </ul> </li> </ul> </li> <li id='end'><em></em><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_3_2</a> <ul> <li><em></em><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_4_1</a> <ul> <li><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_5_2</a></li> </ul> </li> <li id='end'><em></em><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_4_2</a> <ul> <li><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);' _ewebeditor_ta_href="javascript%3Avoid(0)%3B">菜单_5_2</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A(function(e)%7B%20%0D%0Afor(var%20_obj%3Ddocument.getElementById(e.id).getElementsByTagName(e.tag)%2Ci%3D-1%2Cem%3Bem%3D_obj%5B%2B%2Bi%5D%3B)%7B%20%0D%0Aem.onclick%20%3D%20function()%7B%20%2F%2Fonmouseover%20%0D%0Avar%20ul%20%3D%20this.nextSibling%3B%20%0D%0Aif(!ul)%7Breturn%20false%3B%7D%20%0D%0Aul%20%3D%20ul.nextSibling%3B%20if(!ul)%7Breturn%20false%3B%7D%20%0D%0Aif(e.tag%20!%3D%20'a')%7B%20ul%20%3D%20ul.nextSibling%3B%20if(!ul)%7Breturn%20false%3B%7D%20%7D%20%2F%2Fa%20%E6%A0%87%E7%AD%BE%E6%8E%A7%E5%88%B6%20%E9%9A%90%E8%97%8F%E6%88%96%E5%88%A0%E9%99%A4%E8%AF%A5%E8%A1%8C%20%0D%0Afor(var%20_li%3Dthis.parentNode.parentNode.childNodes%2Cn%3D-1%2Cli%3Bli%3D_li%5B%2B%2Bn%5D%3B)%7B%20%0D%0Aif(li.tagName%3D%3D%22LI%22)%7B%20%0D%0Afor(var%20_ul%3Dli.childNodes%2Ct%3D-1%2C%24ul%3B%24ul%3D_ul%5B%2B%2Bt%5D%3B)%7B%20%0D%0Aswitch(%24ul.tagName)%7B%20%0D%0Acase%20%22UL%22%3A%20%0D%0A%24ul.className%20%3D%20%24ul!%3Dul%3F%22%22%20%3A%20ul.className%3F%22%22%3A%22off%22%3B%20%0D%0Abreak%3B%20%0D%0Acase%20%22EM%22%3A%20%0D%0A%24ul.className%20%3D%20%24ul!%3Dthis%3F%22%22%20%3A%20this.className%3F%22%22%3A%22off%22%3B%20%0D%0Abreak%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D)(%7Bid%3A'menu'%2Ctag%3A'em'%7D)%3B%20%0D%0A%3C%2Fscript%3E"> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
在线演示
http://demo.glzy8.com/js/2011/caidan/index.htm
教程首页
更多教程