大家都知道jQuery是一个框架，它封装了JS，让使用起来更加方便。前两篇博文分别用CSS样式和JS实现，所以这一篇用jQuery实现了二级下拉菜单。

使用JQuery实现所需的知识包括：

1)使用$(function(){).})来获取要使用的HTML元素。2)使用children()方法查找子元素。3)使用show()方法显示HTML元素。4)使用hide()方法隐藏HTML元素。5)jQuery库引用方法：第一种方法：将jQuery库下载到电脑上引用。我下载了jquery-1.7.1.min.js

例如：

脚本类型=' text/JavaScript ' src=' http : jQuery/jQuery-1 . 7 . 1 . min . js '/脚本第二种方法是直接引用在线服务器上的jQuery库文件，如Google服务器jQuery库和百度服务器jQuery库。

比如参考百度服务器上的jQuery库文件

脚本类型=' text/JavaScript ' src=' http : jquery/1 . 9 . 0/jquery . js '/脚本接下来看看生产过程：

1.调用jquery库：编写代码并引用jQuery库。由于谷歌已经退出大陆，建议使用百度服务器的jQuery库。关注：百度服务器的jQuery库地址：http://libs.baidu.com/jquery/1.9.0/jquery.js. 2。编写display子菜单函数，使用$，通过类名获取一级菜单li，通过children()找到li的子元素ul，通过show()显示二级菜单。3.写一个隐藏的子菜单函数，使用$，通过类名获取一级菜单li，通过children()找到li的子元素ul，使用hide()方法隐藏二级菜单。4、做浏览器兼容性测试，至少五个浏览器。IE7，8，9，火狐，谷歌，2345浏览器等。我们先来看看效果图：

最后，让我们看一下代码，它与前面的代码没有太大区别：

HTML代码：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' health etahttp-equiv=' Content-Type ' Content=' text/html；字符集=GB 2312/标题下拉菜单/titlelinkrel='样式表type=' text/CSS ' href=' style。CSS ' rel='外部no follow '/！-引用百度服务器的框架库-script src=' http :3358 libs。百度。com/jquery/1。9 .0/jquery。js '/script脚本类型=' text/JavaScript ' src=' http :脚本。js '/script/headdy divided=' nav ' class=' nav ' ulliahref=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '网站首页/a/Lili class='导航菜单' ahref=' # rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '课程大厅/aullia href=' # rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external ahref=' # external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' jQuery/a/lilah ref=' # rel=“外部nofollow”rel=“外部no follow”rel=“外部no follow”rel=“外部no follow”rel=“外部no follow”rel=“外部no follow”rel=“外部no follow”学习中心/aullia href=' # rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel='外部' nofollow '视频学习/a/liliyahref=' # rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '案例学习/a/liliyahref=' # rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '交流平台/a/Li/ul/lilah ref=' # rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '经典案例/a/liliyahref=' # rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '关于我们/a/li/ul/div/body/htmlCSS样式表外部style.css文件代码：

/*CSS全局设置*/* { margin :0；划水：0;}.nav {底色： # EEEEEEE高度：40 px宽度width :450 pxmargin :0 auto } ul { list-style : none；} ul li { float:left线高：40 px文本对齐：居中；} a { text-decoration : nonecolor: # 000000显示：块；宽度：90 px高度：40 px} a :悬停{背景色： # 66666；color : # FFFFFF } ul Li ul Li { float : none背景色-: # EEEEEEE；} ul li ul { display:none}/*为了兼容IE7写的半铸钢钢性铸铁(铸造半钢)样式，但是必须写在a:hover前面*/ul li ul li a:link，ul Li ul :访问过{底色： # EEEEEEE} ul Li ul阿利：悬停{背景色： # 009933；}JS脚本外部射流研究…脚本文件代码：

$(function(){$(').导航菜单').mouseover(函数(){$(this)).儿童(' ul ').show()；})$('.导航菜单').mouseout(函数(){$(此)).儿童(' ul ').hide()；})})以上所述是小编给大家介绍的框架二级导航下拉菜单详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！