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 相关文章推荐
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 Javascript
Javascript闭包用法实例分析
Jan 23 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
Javascript农历与公历相互转换的简单实例
Oct 09 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
JavaScript 数组的进化与性能分析
Sep 18 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
Jul 20 Javascript
Element el-button 按钮组件的使用详解
Feb 01 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
在数据量大(超过10万)的情况下
2007/01/15 PHP
php中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
详谈PHP编码转换问题
2015/07/28 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
js加载读取内容及显示与隐藏div示例
2014/02/13 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
详解vue-router 初始化时做了什么
2018/06/11 Javascript
angular6.0开发教程之如何安装angular6.0框架
2018/06/29 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
2020/05/07 Javascript
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python中文件的读取和写入操作
2018/04/27 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
党委书记岗位职责
2013/11/24 职场文书
大门门卫岗位职责
2013/11/30 职场文书
百日安全活动总结
2014/05/04 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
PyQt5实现多张图片显示并滚动
2021/06/11 Python
为什么RedisCluster设计成16384个槽
2021/09/25 Redis
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL