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 相关文章推荐
利用javascript中的call实现继承
Jan 22 Javascript
五段实用的js高级技巧
Dec 20 Javascript
javascript简易缓动插件(源码打包)
Feb 16 Javascript
JS获取url链接字符串 location.href
Dec 23 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
Feb 26 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
Apr 08 Javascript
jQuery实现自定义下拉列表
Jan 05 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
Jan 18 Javascript
layui 给数据表格加序号的方法
Aug 20 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&amp;&amp;mysql)五
2006/10/09 PHP
PHP addcslashes()函数讲解
2019/02/03 PHP
js滚动条多种样式,推荐
2007/02/05 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
JavaScript数组和循环详解
2015/04/27 Javascript
分享jQuery封装好的一些常用操作
2016/07/28 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
django Serializer序列化使用方法详解
2018/10/16 Python
python实现中文文本分句的例子
2019/07/15 Python
自适应线性神经网络Adaline的python实现详解
2019/09/30 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
python中str内置函数用法总结
2020/12/27 Python
婴儿地球:Baby Earth
2018/12/25 全球购物
丑小鸭教学反思
2014/02/03 职场文书
《忆江南》教学反思
2014/04/07 职场文书
情人节寄语大全
2014/04/11 职场文书
中学生英语演讲稿
2014/04/26 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
音乐剧猫观后感
2015/06/04 职场文书
Python实现双向链表基本操作
2022/05/25 Python
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL