java 三级菜单栏的添加_[Java教程]jquery实现的三级导航菜单实例代码

[Java教程]jquery实现的三级导航菜单实例代码

0 2016-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()方法一章节。