jQuery实现了两级下拉菜单的效果

大家都知道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库。关注：http://libs.baidu.com/jquery/1.9.0/jquery.js2,百度服务器： jQuery库地址编写显示子菜单功能，使用$，通过类名获取一级菜单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 L1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；Charset=gb2312'/title下拉菜单/title linkrel='样式表' type=' text/CSS ' href=' style . CSS '/！-参考百度服务器的jQuery库-Script src=' http :3358 libs . Baidu.com/jQuery/1 . 9 . 0/jQuery . js '/Script Script type=' text/JavaScript ' src=' http : Script . js '/Script/head body div id=' nav ' class=' nav ' ullia href=' # '网站主页/a/li li class='navmenu'a href='# '课程大厅/a ulliajquery/a/li lia href='# ' Ajax/a/Li/ul/Li Li class=' nav menu ' a href=' # '学习中心/a ul lia href='# '视频学习/a/Li lia href=' # '案例研究/a/li lia href='# '交流平台。Ul /li lia href='# '经典案例/a/li lia href='# '关于我们/a/li /ul /div /body /html CSS样式表外部样式. CSS文件代码：

/*CSS全局设置*/* { margin :0；划水：0；} .nav { background-color : # EEEEEEE；高度：40 px；宽度width:450pxmargin:0 auto} ul { list-style : none；} ul li { float:left线高：40 px；文本对齐：居中；} a { text-decoration : none；color: # 000000显示：块；宽度：90 px；高度：40 px；} a : hover { background-color : # 66666；color: # FFFFFF} ul li ul li { float:none背景色-: # EEEEEE；} ul li ul { display:none}/*为了兼容IE7写的CSS样式，必须写在a:hover */ul Li ul Li a:链接之前，ul Li ul Li a:访问过{底色： # eeeeee} ul Li ul Li a : hover { background-color : # 009933；} JS脚本外部脚本，JS文件代码：

$(function(){ $(')。nav menu’)。mouseover(function(){ $(this))。儿童(' ul ')。show()；}) $('.nav menu’)。mouseout(函数(){ $(this))。儿童(' ul ')。hide()；})})希望这篇文章对大家学习jquery编程有所帮助。