JS實現(xiàn)無限級網(wǎng)頁折疊菜單(類似樹形菜單)效果代碼
更新時間：2015年09月17日 09:36:32 作者：企鵝
這篇文章主要介紹了JS實現(xiàn)無限級網(wǎng)頁折疊菜單(類似樹形菜單)效果代碼,涉及JavaScript基于鼠標(biāo)事件實現(xiàn)針對頁面元素結(jié)點的遍歷及樣式操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)無限級網(wǎng)頁折疊菜單(類似樹形菜單)效果代碼。分享給大家供大家參考。具體如下：
這是一款超不錯的網(wǎng)頁折疊菜單，采用JavaScript實現(xiàn)。折疊菜單是大家比較常見到的一種菜單形式，可廣泛應(yīng)用于管理系統(tǒng)、后臺左側(cè)、產(chǎn)品列表中，本折疊菜單有點樹形菜單的味道，相信“無限級”會滿足你的要求。
運行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-unlimit-fade-in-out-tree-menu-codes/
具體代碼如下：
<html>
<head>
<title>無限級折疊菜單JS版</title>
<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("images/ul-bg.gif") repeat-y 5px 0px; overflow:hidden;
}
#menu ul li {
padding:5px 0 2px 15px;
background:url("images/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("images/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>
</head>
<body>
<div id="menu">
<h3>無限級折疊菜單JavaScript版</h3>
<ul>
<li><em></em><a href='javascript:void(0);'>菜單_1_1</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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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 標(biāo)簽控制 隱藏或刪除該行
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>
希望本文所述對大家的JavaScript程序設(shè)計有所幫助。
相關(guān)文章
本篇文章主要介紹了js中幾種實用的跨域方法原理詳解 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。2016-12-12
png-8模式的圖片，如果沒有漸變的話是透明的，如果有漸變就不透明了。需要js的支持。2010-02-02
這篇文章主要介紹了JS如何在不同平臺實現(xiàn)多語言方式,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
本文給大家整理匯總了一些做前端經(jīng)常需要用的到JavaScript代碼片段，非常的全面，有需要的小伙伴可以參考下2016-09-09
iphone safari不支持position fixed的解決方法
最近一直在做移動web開發(fā)，開發(fā)過程中遇到了許多問題，mobile safari不支持position: fixed就是一件很頭疼的事情2012-05-05
這篇文章主要介紹了js實現(xiàn)獲取div坐標(biāo)的方法,通過調(diào)用jQuery插件實現(xiàn)獲取div元素坐標(biāo)的功能,非常簡單實用,需要的朋友可以參考下2015-11-11
這篇文章主要為大家詳細(xì)介紹了原生JS實現(xiàn)淡出淡入輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要為大家詳細(xì)介紹了js編寫選項卡效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
Javascript前端UI框架Kit使用指南之kitjs的對話框組件
本文以kitjs對話框組件為例，給我們詳細(xì)介紹了kitjs的組件目錄、默認(rèn)代碼模板、構(gòu)造器及初始方法、以及Kitjs繼承。講解的非常細(xì)致，對我們熟練掌握kitjs組件很有幫助。2014-11-11
Javascript實現(xiàn)關(guān)閉廣告效果
這篇文章主要為大家詳細(xì)介紹了Javascript實現(xiàn)關(guān)閉廣告效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01