• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

jQuery三级导航菜单代码示例

jQuery 程序员 2年前 (2019-01-14) 132次浏览 已收录 0个评论

目前项目使用最多的可能是二级导航菜单,网上代码一大堆,三级菜单的代码也很多,相对较少一些。

本文搞代码通过一个代码实例详细介绍一下三级导航菜单的实现过程。

一.实现原理:

在静态结构方面主要使用ul和li的嵌套完成的:

一级导航结构:

二级导航结构:

这个是二级导航的结构,三级导航就是再继续嵌套。

本代码比较简单,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]


喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址