js无限级折叠菜单精简版

2019-11-20 23:53:47

字体：大中小

来源：转载

供稿：网友

<!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>  </style> </head> <body> <div id="menu"> <h3>无限级折叠菜单 1.0.1 JS版</h3> <ul> <li><a href='javascript:void(0);'>菜单_1_1</a> <ul> <li><a href='javascript:void(0);'>菜单_2_1</a> <ul> <li><a href='javascript:void(0);'>菜单_3_1</a> <ul> <li><a href='javascript:void(0);'>菜单_4_1</a> <ul> <li><a href='javascript:void(0);'>菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜单_4_2</a> <ul> <li><a href='javascript:void(0);'>菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> </ul> </li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜单_3_2</a> <ul> <li><a href='javascript:void(0);'>菜单_4_1</a> <ul> <li><a href='javascript:void(0);'>菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜单_4_2</a> <ul> <li><a href='javascript:void(0);'>菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> </ul> </li> </ul> </li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜单_2_2</a> <ul> <li><a href='javascript:void(0);'>菜单_3_1</a> <ul> <li><a href='javascript:void(0);'>菜单_4_1</a> <ul> <li><a href='javascript:void(0);'>菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜单_4_2</a> <ul> <li><a href='javascript:void(0);'>菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> </ul> </li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜单_3_2</a> <ul> <li><a href='javascript:void(0);'>菜单_4_1</a> <ul> <li><a href='javascript:void(0);'>菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜单_4_2</a> <ul> <li><a href='javascript:void(0);'>菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜单_1_2</a> <ul> <li><a href='javascript:void(0);'>菜单_2_1</a> <ul> <li><a href='javascript:void(0);'>菜单_3_1</a> <ul> <li><a href='javascript:void(0);'>菜单_4_1</a> <ul> <li><a href='javascript:void(0);'>菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜单_4_2</a> <ul> <li><a href='javascript:void(0);'>菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> </ul> </li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜单_3_2</a> <ul> <li><a href='javascript:void(0);'>菜单_4_1</a> <ul> <li><a href='javascript:void(0);'>菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜单_4_2</a> <ul> <li><a href='javascript:void(0);'>菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> </ul> </li> </ul> </li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜单_2_2</a> <ul> <li><a href='javascript:void(0);'>菜单_3_1</a> <ul> <li><a href='javascript:void(0);'>菜单_4_1</a> <ul> <li><a href='javascript:void(0);'>菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜单_4_2</a> <ul> <li><a href='javascript:void(0);'>菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> </ul> </li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜单_3_2</a> <ul> <li><a href='javascript:void(0);'>菜单_4_1</a> <ul> <li><a href='javascript:void(0);'>菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜单_4_2</a> <ul> <li><a href='javascript:void(0);'>菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> <script type="text/javascript"> (function(e){ for(var _obj=document.getElementById(e.id).getElementsByTagName(e.tag),i=-1,em;em=_obj[++i];){ em.onclick = function(){ //onmouseover var ul = this.nextSibling; if(!ul){return false;} ul = ul.nextSibling; if(!ul){return false;} if(e.tag != 'a'){ ul = ul.nextSibling; if(!ul){return false;} } //a 标签控制 隐藏或删除该行 for(var _li=this.parentNode.parentNode.childNodes,n=-1,li;li=_li[++n];){ if(li.tagName=="LI"){ for(var _ul=li.childNodes,t=-1,$ul;$ul=_ul[++t];){ switch($ul.tagName){ case "UL": $ul.className = $ul!=ul?"" : ul.className?"":"off"; break; case "EM": $ul.className = $ul!=this?"" : this.className?"":"off"; break; } } } } } } })({id:'menu',tag:'em'}); </script> </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

在线演示 http://demo.VeVB.COm/js/2011/caidan/index.htm

上一篇：jquery获取下拉列表的值为null的解决方法

下一篇：iframe的onload在Chrome/Opera中执行两次Bug的解决方法