jQuery实现二级下拉菜单效果


Posted in Javascript onJanuary 05, 2016

大家都知道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这个版本。
       例如: <script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>
第二种方法:直接引用在线服务器上的jQuery库文件,比如谷歌服务器jQuery库,百度服务器jQuery库等。
       例如:引用百度服务器上的jQuery库文件
       <script type="text/javascript" src="jquery/1.9.0/jquery.js"></script>
接下来看看制作的流程:
1、调用jQuery库:编写代码,引用jquery库。由于谷歌已退出大陆,建议使用百度服务器的jQuery库。
       注意: 百度服务器的jQuery库地址:http://libs.baidu.com/jquery/1.9.0/jquery.js
2 、编写显示子菜单函数,使用$,并通过class名获取一级菜单li,过children()找到li的孩子元素ul,使用show()方法,显示二级菜单。
3、编写隐藏子菜单函数,使用$,并通过class名获取一级菜单li,过children()找到li的孩子元素ul,使用hide()方法, 隐藏二级菜单。
4、做浏览器兼容性测试,至少五个浏览器。IE7,8,9,火狐,谷歌,2345浏览器等。

先来看看效果图:

jQuery实现二级下拉菜单效果

最后我们来看看代码的情况,和前面的区别不大:
HTML代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>下拉菜单</title> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
<!--引用百度服务器的jQuery库--> 
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
<script type="text/javascript" src="script.js"></script> 
</head> 
 
<body> 
<div id="nav" class="nav"> 
  <ul> 
    <li><a href="#">网站首页</a></li> 
   <li class="navmenu"><a href="#">课程大厅</a> 
    <ul> 
     <li><a href="#">JavaScript</a></li> 
     <li><a href="#">jQuery</a></li> 
     <li><a href="#">Ajax</a></li> 
    </ul> 
   </li> 
   <li class="navmenu"><a href="#">学习中心</a> 
    <ul> 
     <li><a href="#">视频学习</a></li> 
     <li><a href="#">案例学习</a></li> 
     <li><a href="#">交流平台</a></li> 
    </ul> 
   </li> 
   <li><a href="#">经典案例</a></li> 
   <li><a href="#">关于我们</a></li> 
  </ul> 
</div> 
</body> 
</html>

CSS样式表外部style.css文件代码:

/*CSS全局设置*/ 
*{ 
 margin:0; 
 padding:0; 
} 
.nav{ 
 background-color:#EEEEEE; 
 height:40px; 
 width:450px; 
 margin:0 auto; 
} 
ul{ 
 list-style:none; 
} 
ul li{ 
 float:left; 
 line-height:40px; 
 text-align:center; 
} 
a{ 
 text-decoration:none; 
 color:#000000; 
 display:block; 
 width:90px; 
 height:40px; 
} 
a:hover{ 
 background-color:#666666; 
 color:#FFFFFF; 
} 
ul li ul li{ 
 float:none; 
 background-color:#EEEEEE; 
} 
ul li ul{ 
 display:none; 
} 
/*为了兼容IE7写的CSS样式,但是必须写在a:hover前面*/ 
ul li ul li a:link,ul li ul li a:visited{ 
 background-color:#EEEEEE; 
} 
ul li ul li a:hover{ 
 background-color:#009933; 
}

JS脚本外部script,js文件代码:

$(function(){ 
  $(".navmenu").mouseover(function(){ 
   $(this).children("ul").show();  
  }) 
  
  $(".navmenu").mouseout(function(){ 
   $(this).children("ul").hide(); 
  }) 
})

希望本文所述对大家学习jquery程序设计有所帮助。

Javascript 相关文章推荐
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
JavaScript调试技巧之console.log()详解
Mar 19 Javascript
用js编写的简单的计算器代码程序
Aug 04 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 Javascript
Vue.directive自定义指令的使用详解
Mar 10 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
Jan 26 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
详解关于微信setData回调函数中的坑
Feb 18 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
Jul 22 Javascript
Vue父组件如何获取子组件中的变量
Jul 24 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 #Javascript
jquery中ajax处理跨域的三大方式
Jan 05 #Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 #Javascript
多个js毫秒倒计时同时进行效果
Jan 05 #Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 #Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 #Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 #Javascript
You might like
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
cnblogs TagCloud基于jquery的实现代码
2010/06/11 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
2014/04/10 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
详解Vue 非父子组件通信方法(非Vuex)
2017/05/24 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
推荐下python/ironpython:从入门到精通
2007/10/02 Python
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
python垃圾回收机制(GC)原理解析
2019/12/30 Python
Python json读写方式和字典相互转化
2020/04/18 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
python 实现IP子网计算
2021/02/18 Python
分享一个页面平滑滚动小技巧(推荐)
2019/10/23 HTML / CSS
在线购买廉价折扣书籍和小说:BookOutlet.com
2018/02/19 全球购物
这段代码难道不该打印出56吗
2013/02/27 面试题
标准自荐信范文
2014/01/29 职场文书
金融管理应届生求职信
2014/02/20 职场文书
技术总监管理岗位职责
2014/03/09 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
孔繁森观后感
2015/06/10 职场文书
优质服务标语口号
2015/12/26 职场文书
2016高一新生军训心得体会
2016/01/11 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python