首页 > web前端 > js教程 > 正文

使用jQuery实现各种下拉菜单功能效果的方法总结

伊谢尔伦
发布: 2017-06-02 14:26:05
原创
4845 人浏览过

jQuery是javascript的一个库,使用起来非常的方便,功能也是十分的强大。通常,只有菜单条显示在窗口中,并且当鼠标指针指向菜单条时,菜单条的子菜单才显示出来。当鼠标指针离开菜单时,子菜单则隐藏起来,回到只显示主菜单条的状态。根据下拉菜单的这种特点,我们可以使用jQuery技术来实现这些功能。这篇文章就来具体说明一下jQuery技术来实现下拉菜单的功能。

一、可以先了解《形形色色的下拉菜单实现教程》中的相关内容介绍

形形色色的下拉菜单实现教程


本课程从易到难,循循渐进,从静态网页布局,到运用HTML/CSS、JavaScript、jQuery不同技术实现动态下拉菜单,让您掌握下拉菜单的制作及在不同浏览器间进行代码调试,解决浏览器兼容问题。

二、jQuery实现下拉菜单功能和效果

1. jquery选择select下拉菜单option项触发事件

在很多应用中,选中一个select下拉选项就会触发一个事件,执行相应的操作。下面就通过代码实例介绍一下如何利用jquery实现此功能,代码选中出去第一项以外的所以选项都可以把value值写入p中。

2. jquery下拉菜单的实现心得

11.png

第一部分:添加了下了菜单的一个触发按钮

第二部分:绑定了一个click事件的处理函数,触发按钮被click后给下拉菜单最外层的li绑定hover处理函数,感觉是比较巧妙的地方。给最外层的li绑定hover函数,这里处理函数写的是当鼠标悬停在li上时不做任何处理(第一函数为空),当鼠标离开时li收起。这样一来,后面展开ul的菜单都是最外层的li里面,这样菜单就不会自动收起了,也就是等于是鼠标离开了整个菜单,li会自动收起。

第三部分:给菜单下中嵌套的ul的hover事件绑定函数,用于展开和收起下一级菜单。同时也给下一级菜单绑定了收起的处理函数,与触发菜单中click给最外层li绑定的收起函数一同作用,是想菜单的自动收起功能。

3. 一个jQuery下拉菜单,代码简单

一个简单的jQuery下拉菜单,代码很少,很适合有基础的新手学习提高。实现也是非常的简单,主要通过jQuery代码,当鼠标指针指向菜单条时,菜单条的子菜单才显示出来。当鼠标指针离开菜单时,子菜单则隐藏起来,回到只显示主菜单条的状态。

4. jQuery实现的导航下拉菜单效果

jQuery实现的导航下拉菜单效果

导航效果(兼容IE6)

1)使用$("#navigation ul li:has(ul)")函数来选择含有

    元素的
  • 元素,然后为它们添加hover事件,

    2)在hover事件的第一个函数内,使用$(this).children("ul")找到

  • 元素内部的
相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板