jQuery三级导航菜单代码示例

  • 内容
  • 评论
  • 相关

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

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

一.实现原理:

在静态结构方面主要使用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三级导航菜单代码示例》的代码,若要看代码效果请大家点击“运行代码”按钮。



注意:如需评论后运行请重新刷新页面,谢谢您搞代码学习知识

原创文章,转载请注明: 转载自搞代码

本文链接地址: jQuery三级导航菜单代码示例

微信支付二维码

微信 赏一包辣条吧~

支付宝支付二维码

支付宝 赏一听可乐吧~

评论

0条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注