[Java教程]jquery实现的三级导航菜单实例代码
0 -01-02 15:00:02
jquery实现的三级导航菜单实例代码:
使用最多的可能是二级导航菜单,所以网上的代码一大堆,三级菜单的代码也很多,不过相对较少一些,本章节通过一个代码实例详细介绍一下三级导航菜单的实现过程,代码如下:
三级导航菜单代码实例-蚂蚁部落首页管理 +首页标题一 _首页标题1_1 _首页标题1_2 首页标题一首页标题二产品管理 产品标题一产品标题二产品标题三
以上代码实现了基本的三级导航菜单的效果,当然美观效果一般,不过可以进行美化,下面介绍一下实现过程:
一.实现原理:
在静态结构方面主要使用ul和li的嵌套完成的:
一级导航结构:
蚂蚁部落
二级导航结构:
产品管理 产品标题1产品标题2产品标题3
这个是二级导航的结构,三级导航就是再继续嵌套。
本代码比较简单,其他的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(),实现当前点击元素的兄弟元素的显示与隐藏的切换。
三.相关阅读:
1.hide()函数可以参阅jQuery的hide()方法一章节。
2.first-child选择器可以参阅jQuery的:first-child选择器一章节。
3.siblings()函数可以参阅jQuery的siblings()方法一章节。
4.toggle()函数可以参阅jQuery的toggle()方法一章节。