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 class="iwvjtn8m0" 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的解決方法