首页 > 文章 > web前端 > js无限级折叠菜单精简版_导航菜单

js无限级折叠菜单精简版_导航菜单

WBOY原创: 2016-05-16 18:09:031114浏览

</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> 
<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);">菜单_2_2</a> 
<ul> 
<li>
<em></em><a href="javascript:void(0);">菜单_3_1</a> 
<ul> 
<li>
<em></em><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> 
</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> 
<ul> 
<li>
<em></em><a href="javascript:void(0);">菜单_3_1</a> 
<ul> 
<li>
<em></em><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> 
</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>

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

在线演示 http://demo.jb51.net/js/2011/caidan/index.htm

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：基于jquery的内容循环滚动小模块（仿新浪微博未登录首页滚动微博显示）_jquery下一篇：Firefox中autocomplete="off" 设置不起作用Bug的解决方法_javascript技巧

查看更多

js无限级折叠菜单精简版_导航菜单

相关文章