目前项目使用最多的可能是二级导航菜单，网上代码一大堆，三级菜单的代码也很多，相对较少一些。
本文搞代码通过一个代码实例详细介绍一下三级导航菜单的实现过程。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery三级导航菜单代码示例-gaodaima.com</title>
<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>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function (){
$("#nav ul").hide();
$("#nav li a:first-child").click(function(){
$(this).siblings().toggle();
});
});
</script>
</head>
<body>
<ul id="nav">
<li><a href="#">首页管理</a>
<ul>
<li><a href="#">+首页标题一</a>
<ul>
<li><a href="#">_首页标题1_1</a> </li>
<li><a href="#">_首页标题1_2</a> </li>
</ul>
</li>
<li><a href="#">首页标题一</a></li>
<li><a href="#">首页标题二</a></li>
</ul>
</li>
<li><a href="#">产品管理</a>
<ul>
<li><a href="#">产品标题一</a></li>
<li><a href="#">产品标题二</a></li>
<li><a href="#">产品标题三</a></li>
</ul>
</li>
</ul>
</body>
</html>
一.实现原理:
在静态结构方面主要使用ul和li的嵌套完成的:
一级导航结构:
<li><a href="#">首页标题</a></li>
二级导航结构:
<ul>
<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>
这个是二级导航的结构，三级导航就是再继续嵌套。
本代码比较简单，jQuery代码原理这里就不介绍，具体参阅代码注释。
二.代码注释:
（1）.$(function (){})，当稳当结构完全加载完毕之后再去执行函数中的代码。
（2）.$(“#nav ul”).hide()，可以将id属性值为nav下的ul全部设置为隐藏状态，这就是为什么在默认状态下是合并的。
（3）.$(“#nav li a:first-child”).click(function(){})，可以为每一个li元素下的第一个a元素注册click事件处理函数。
（4）.$(this).siblings().toggle()，实现当前点击元素的兄弟元素的显示与隐藏的切换。
本文案例为大家展示了《jQuery三级导航菜单代码示例》的代码，若要看代码效果请大家点击“运行代码”按钮。
[code]<!DOCTYPE HTML> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″> <title>jQuery三级导航菜单代码示例-gaodaima.com</title> <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> <script src=”http://libs.baidu.com/jquery/1.9.0/jquery.js”></script> <script type=”text/javascript”> $(function (){ $(“#nav ul”).hide(); $(“#nav li a:first-child”).click(function(){ $(this).siblings().toggle(); }); }); </script> </head> <body> <ul id=”nav”> <li><a href=”#”>首页管理</a> <ul> <li><a href=”#”>+首页标题一</a> <ul> <li><a href=”#”>_首页标题1_1</a> </li> <li><a href=”#”>_首页标题1_2</a> </li> </ul> </li> <li><a href=”#”>首页标题一</a></li> <li><a href=”#”>首页标题二</a></li> </ul> </li> <li><a href=”#”>产品管理</a> <ul> <li><a href=”#”>产品标题一</a></li> <li><a href=”#”>产品标题二</a></li> <li><a href=”#”>产品标题三</a></li> </ul> </li> </ul> </body> </html>[/code]
转载请注明原文链接：jQuery三级导航菜单代码示例
