首頁 > 文章 > 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无限级折叠菜单精简版_导航菜单

相關文章