js无限级折叠菜单精简版 | 学步园

返回顶部
查看留言
转到底部

现在的位置: 首页 > 综合 > 正文

js无限级折叠菜单精简版

2012年11月29日 ⁄ 综合 ⁄ 共 1014字 ⁄ 字号小中大 ⁄ 评论关闭

文章目录

无限级折叠菜单 1.0.1 JS版

<meta charset="utf-8"><meta name="keywords" content="hj1227 原创无限级折叠菜单 1.01js版"><meta name="description" content="hj1227 原创无限级折叠菜单 1.01js版"><br />
<style> 
 
</style>
<div id="menu">
<h4 id="title-0">无限级折叠菜单 1.0.1 JS版</h4>
<ul>
<li><em></em><a href="javascript:void(0);">菜单_1_1</a> </p>
<ul>
<li><em></em><a href="javascript:void(0);">菜单_2_1</a> </p>
<ul>
<li><em></em><a href="javascript:void(0);">菜单_3_1</a> </p>
<ul>
<li><em></em><a href="javascript:void(0);">菜单_4_1</a> </p>
<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"><em></em><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"><em></em><a href="javascript:void(0);">菜单_3_2</a>
<ul>
<li><em></em><a href="javascript:void(0);">菜单_4_1</a> </p>
<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"><em></em><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"><em></em><a href="javascript:void(0);">菜单_2_2</a>
<ul>
<li><em></em><a href="javascript:void(0);">菜单_3_1</a> </p>
<ul>
<li><em></em><a href="javascript:void(0);">菜单_4_1</a> </p>
<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"><em></em><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"><em></em><a href="javascript:void(0);">菜单_3_2</a>
<ul>
<li><em></em><a href="javascript:void(0);">菜单_4_1</a> </p>
<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"><em></em><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"><em></em><a href="javascript:void(0);">菜单_1_2</a>
<ul>
<li><em></em><a href="javascript:void(0);">菜单_2_1</a> </p>
<ul>
<li><em></em><a href="javascript:void(0);">菜单_3_1</a> </p>
<ul>
<li><em></em><a href="javascript:void(0);">菜单_4_1</a> </p>
<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"><em></em><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"><em></em><a href="javascript:void(0);">菜单_3_2</a>
<ul>
<li><em></em><a href="javascript:void(0);">菜单_4_1</a> </p>
<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"><em></em><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"><em></em><a href="javascript:void(0);">菜单_2_2</a>
<ul>
<li><em></em><a href="javascript:void(0);">菜单_3_1</a> </p>
<ul>
<li><em></em><a href="javascript:void(0);">菜单_4_1</a> </p>
<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"><em></em><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"><em></em><a href="javascript:void(0);">菜单_3_2</a>
<ul>
<li><em></em><a href="javascript:void(0);">菜单_4_1</a> </p>
<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"><em></em><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>
<p><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>

返回

【上篇】css 选择器优先级
【下篇】COM学习笔记（四）

作者: jeux

该日志由 jeux 于11年前发表在综合分类下，最后更新于 2012年11月29日.
转载请注明: js无限级折叠菜单精简版 | 学步园 +复制链接

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园保留所有权利.
软文销售 QQ客服：2265327166

点击这里给我发消息

（其他合作也可洽谈）