jQuery实现二级下拉菜单代码示例

  • 内容
  • 评论
  • 相关

介绍一段代码实例,它实现点击出现二级下拉菜单的效果。

代码实例如下:

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).$(document).ready(function(){}),当文档结构完全再去执行函数中的代码、

(2).var objStr = ".UpLayer",声明一个变量并赋值,这个值用作一个class选择器。

(3).$(objStr).each(function(index){ }),使用each()方法遍历匹配集合中的元素。

(4).$(this).click(function(){ },为当前元素元素注册click事件处理函数。

(5).$(objStr+" dd").show(),显示class属性值为UpLayer下的dd元素。

(6).$(objStr+" dt").addClass("UpLayer02"),为class属性值为UpLayer下的dt元素添加UpLayer02样式类。

(7).$(this).hover(function(){},function(){

$(objStr+" dd").hide();

$(objStr+" dt").removeClass("UpLayer02");

}),当鼠标离开的时候,隐藏dd元素,删除相应的样式类。

本文案例为大家展示了《jQuery实现二级下拉菜单代码示例》的代码,若要看代码效果请大家点击“运行代码”按钮。



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

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

本文链接地址: jQuery实现二级下拉菜单代码示例

微信支付二维码

微信 赏一包辣条吧~

支付宝支付二维码

支付宝 赏一听可乐吧~

评论

0条评论

发表评论

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