Tip: you can modify some code before running
<!DOCTYPE html> <ptml> <pead> <meta charset="utf-8" /> <title>Unlimited folding menu 1.01 JS edition</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("/js/2011/caidan/ul-bg.gif") repeat-y 5px 0px; overflow:hidden; } #menu ul li { padding:5px 0 2px 15px; background:url("/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("/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> </pead> <body> <div id="menu"> <p>Unlimited folding menu version 1.0.1 JS</p> <ul> <li><em></em>Menu _ 1_1<ul> <li><em></em>Menu _ 2_1<ul> <li><em></em>Menu _ 3_1<ul> <li><em></em>Menu _ 4_1<ul> <li>Menu _ 5_1</li> <li id='end'>Menu _ 5_2</li> </ul> </li> <li id='end'><em></em>Menu _ 4_2<ul> <li>Menu _ 5_1</li> <li id='end'>Menu _ 5_2</li> </ul> </li> </ul> </li> <li id='end'><em></em>Menu _ 3_2<ul> <li><em></em>Menu _ 4_1<ul> <li>Menu _ 5_1</li> <li id='end'>Menu _ 5_2</li> </ul> </li> <li id='end'><em></em>Menu _ 4_2<ul> <li>Menu _ 5_1</li> <li id='end'>Menu _ 5_2</li> </ul> </li> </ul> </li> </ul> </li> <li id='end'><em></em>Menu _ 2_2<ul> <li><em></em>Menu _ 3_1<ul> <li><em></em>Menu _ 4_1<ul> <li>Menu _ 5_1</li> <li id='end'>Menu _ 5_2</li> </ul> </li> <li id='end'><em></em>Menu _ 4_2<ul> <li>Menu _ 5_1</li> <li id='end'>Menu _ 5_2</li> </ul> </li> </ul> </li> <li id='end'><em></em>Menu _ 3_2<ul> <li><em></em>Menu _ 4_1<ul> <li>Menu _ 5_1</li> <li id='end'>Menu _ 5_2</li> </ul> </li> <li id='end'><em></em>Menu _ 4_2<ul> <li>Menu _ 5_1</li> <li id='end'>Menu _ 5_2</li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li id='end'><em></em>Menu _ 1_2<ul> <li><em></em>Menu _ 2_1<ul> <li><em></em>Menu _ 3_1<ul> <li><em></em>Menu _ 4_1<ul> <li>Menu _ 5_1</li> <li id='end'>Menu _ 5_2</li> </ul> </li> <li id='end'><em></em>Menu _ 4_2<ul> <li>Menu _ 5_1</li> <li id='end'>Menu _ 5_2</li> </ul> </li> </ul> </li> <li id='end'><em></em>Menu _ 3_2<ul> <li><em></em>Menu _ 4_1<ul> <li>Menu _ 5_1</li> <li id='end'>Menu _ 5_2</li> </ul> </li> <li id='end'><em></em>Menu _ 4_2<ul> <li>Menu _ 5_1</li> <li id='end'>Menu _ 5_2</li> </ul> </li> </ul> </li> </ul> </li> <li id='end'><em></em>Menu _ 2_2<ul> <li><em></em>Menu _ 3_1<ul> <li><em></em>Menu _ 4_1<ul> <li>Menu _ 5_1</li> <li id='end'>Menu _ 5_2</li> </ul> </li> <li id='end'><em></em>Menu _ 4_2<ul> <li>Menu _ 5_1</li> <li id='end'>Menu _ 5_2</li> </ul> </li> </ul> </li> <li id='end'><em></em>Menu _ 3_2<ul> <li><em></em>Menu _ 4_1<ul> <li>Menu _ 5_1</li> <li id='end'>Menu _ 5_2</li> </ul> </li> <li id='end'><em></em>Menu _ 4_2<ul> <li>Menu _ 5_1</li> <li id='end'>Menu _ 5_2</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 label controls hide or delete the row 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> </ptml>
Tip: you can modify some code before running
