首頁 > 開發者 > JavaScript
這幾天在公司的通用管理後台，使用的左右架構結構，點擊左側，右側展開內容，項目中經常遇到左側二級或者三級的情況，以前都是使用dtree,但是發現dtree ，樣式及結構上不好控制 ，
如果是動態資料，還要寫到cs檔案裡面 輸入字元，這樣不利於維護，時間久了自己都找不清了。、
於是今天自己寫了個輕量級的三級展開菜單，如果需要可以在增加一層級，一般公司的項目三級都足夠了。
簡介：
div部分無需自己定義class 及ID,只要是如下的結構就可以了，資料可以是動態 也可以是靜態
樣式自己可以控制，修改符合自己的風格
代碼如下：
css
複製代碼 代碼如下:
<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：
複製代碼 代碼如下:
<script type="text/javascript">
//作者：loafinweb
// 網址：www.cnblogs.com/clc2008
$(function () {
$("#nav ul").hide();
//控制一級子功能表
$("#nav li a:first-child").click(function () {
$(this).siblings().toggle();
});
//控制二級子功能表
$("#nav li ul a:first-child").click(function () {
$(this).siblings().find("ul").toggle();
});
});
</script>
div：
複製代碼 代碼如下:
<body>
<ul id="nav">
<li><a href="#">首頁管理</a>
<ul>
<li><a href="#">+首網頁標題1</a>
<ul>
<li><a href="#">_首網頁標題1_1</a> </li>
<li><a href="#">_首網頁標題1_2</a> </li>
</ul>
</li>
<li><a href="#">首網頁標題2</a></li>
<li><a href="#">首網頁標題3</a></li>
</ul>
</li>
<li><a href="#">產品管理</a>
<ul>
<li><a href="#">產品標題1</a></li>
<li><a href="#">產品標題2</a></li>
<li><a href="#">產品標題3</a></li>
</ul>
</li>
</ul>
</body>
檔案打包下載
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
