快捷導(dǎo)航

超輕量級(jí)的基于jquery的三級(jí)展開列表

更新時(shí)間：2011年04月26日 22:52:57 作者：

今天自己寫了個(gè)輕量級(jí)的三級(jí)展開菜單，如果需要可以在增加一級(jí)別，一般公司的項(xiàng)目三級(jí)都足夠了。

這幾天在公司的通用管理后臺(tái)，使用的左右框架結(jié)構(gòu)，點(diǎn)擊左側(cè)，右側(cè)展開內(nèi)容，項(xiàng)目中經(jīng)常遇到左側(cè)二級(jí)或者三級(jí)的情況，以前都是使用dtree,但是發(fā)現(xiàn)dtree ，樣式及結(jié)構(gòu)上不好控制，
如果是動(dòng)態(tài)的數(shù)據(jù)，還要寫到cs文件里面輸入字符，這樣不利于維護(hù)，時(shí)間久了自己都找不清了。、
于是今天自己寫了個(gè)輕量級(jí)的三級(jí)展開菜單，如果需要可以在增加一級(jí)別，一般公司的項(xiàng)目三級(jí)都足夠了。

簡介：
div部分無需自己定義class 及ID,只要是如下的結(jié)構(gòu)就可以了，數(shù)據(jù)可以是動(dòng)態(tài) 也可以是靜態(tài)的
樣式自己可以控制，修改符合自己的風(fēng)格

代碼如下：
css

復(fù)制代碼代碼如下:

 
<style type="text/css"> 
*{ margin:0px; padding:0px;} 
a{ text-decoration:none; color:#000;} 
a:hover,a:linked{ color:#000;} 
#nav{ margin-left:20px; list-style:none; } 
#nav li，#nav li ul,#nav li ul li{ list-style:none;} 
#nav li a{ width:200px; height:30px; line-height:30px; background:#ccc; display:block; text-indent:10px;} 
#nav li ul li a{ background:#eaeaea;} 
#nav li ul li ul li a{ background:#fffff2;} 
</style> 

js：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
//作者：loafinweb 
// 網(wǎng)址：www.cnblogs.com/clc2008 
$(function () { 
$("#nav ul").hide(); 
//控制一級(jí)子菜單 
$("#nav li a:first-child").click(function () { 
$(this).siblings().toggle(); 
}); 
//控制二級(jí)子菜單 
$("#nav li ul a:first-child").click(function () { 
$(this).siblings().find("ul").toggle(); 
}); 
}); 
</script> 

div：

復(fù)制代碼代碼如下:

 
<body> 
<ul id="nav"> 
<li><a href="#">首頁管理</a> 
<ul> 
<li><a href="#">+首頁標(biāo)題1</a> 
<ul> 
<li><a href="#">_首頁標(biāo)題1_1</a> </li> 
<li><a href="#">_首頁標(biāo)題1_2</a> </li> 
</ul> 
</li> 
<li><a href="#">首頁標(biāo)題2</a></li> 
<li><a href="#">首頁標(biāo)題3</a></li> 
</ul> 
</li> 
<li><a href="#">產(chǎn)品管理</a> 
<ul> 
<li><a href="#">產(chǎn)品標(biāo)題1</a></li> 
<li><a href="#">產(chǎn)品標(biāo)題2</a></li> 
<li><a href="#">產(chǎn)品標(biāo)題3</a></li> 
</ul> 
</li> 
</ul> 
</body> 