JavaScript实现下拉菜单的显示和隐藏


Posted in Javascript onJanuary 05, 2016

我们这一篇来用JavaScript脚本实现下拉菜单的显示和隐藏。使用JavaScript方法实现我们需要用的知识有:
1)JS事件:onmouseover鼠标经过事件和onmouseout鼠标离开事件。
2)JS基础语法:使用function关键字定义函数。
3)DOM编程:getElementsByTagName()方法。
那么接下来就是我们制作的流程:
1)隐藏二级菜单:设置CSS样式,让二级菜单隐藏。
2)编写显示子菜单showsub()函数:使用getElementsByTagName获取二级菜单项;通过style.display设置二级菜单显示。
3)编写隐藏子菜单hidesub()函数:使用getElementsByTagName获取二级菜单项;通过style.display设置二级菜单隐藏。
4)添加鼠标事件:给有二级菜单的一级菜单添加鼠标事件,并调用showsub()/hidesub()函数,实现鼠标经过一级菜单,二级菜单显示和隐藏。
5)做浏览器兼容性检测,至少五个浏览器。IE7,8,9,火狐,谷歌,2345浏览器等。

效果图:

JavaScript实现下拉菜单的显示和隐藏

HTML代码:

<span style="font-size:18px;"><!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> 
<!--引入的外部CSS样式文件--> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
<!--引入的外部JS脚本文件--> 
<script type="text/javascript" src="script.js"></script> 
</head> 
 
<body> 
<div id="nav" class="nav"> 
 <ul> 
  <li><a href="#">网站首页</a></li> 
  <li onmouseover="showsub(this)" onmouseout="hidesub(this)"><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 onmouseover="showsub(this)" onmouseout="hidesub(this)"><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> 
</span>

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

<span style="font-size:18px;">/*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; 
} 
</span>

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

<span style="font-size:18px;">function showsub(li){ 
 var submenu=li.getElementsByTagName("ul")[0]; 
 submenu.style.display="block"; 
} 
function hidesub(li){ 
 var submenu=li.getElementsByTagName("ul")[0]; 
 submenu.style.display="none"; 
}</span>

以上就是本文的全部内容,希望对大家的学习有所帮助,实现下拉菜单效果。

Javascript 相关文章推荐
通用javascript脚本函数库 方便开发
Oct 13 Javascript
jquery UI 1.72 之datepicker
Dec 29 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
Sep 19 Javascript
javascript笔记 String类replace函数的一些事
Sep 22 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
Javascript中prototype的使用详解
Jun 18 Javascript
搭建element-ui的Vue前端工程操作实例
Feb 23 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
Angular6项目打包优化的实现方法
Dec 15 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
Feb 17 Javascript
mpvue实现微信小程序快递单号查询代码
Apr 03 Javascript
jQuery实现二级下拉菜单效果
Jan 05 #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
You might like
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
php中并发读写文件冲突的解决方案
2013/10/25 PHP
php计算一个文件大小的方法
2015/03/30 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
一段实时更新的时间代码
2006/07/07 Javascript
js实时监听文本框状态的方法
2011/04/26 Javascript
js查错流程归纳
2012/05/04 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
replace()方法查找字符使用示例
2013/10/28 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
jQuery内存泄露解决办法
2016/12/13 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
详解webpack进阶之插件篇
2017/07/06 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
vue模块拖拽实现示例代码
2019/03/09 Javascript
vue分页器组件编写方法详解
2019/06/28 Javascript
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python脚本实现查找webshell的方法
2014/07/31 Python
Python中序列的修改、散列与切片详解
2017/08/27 Python
详解利用Python scipy.signal.filtfilt() 实现信号滤波
2019/06/05 Python
Django 外键的使用方法详解
2019/07/19 Python
Django启动时找不到mysqlclient问题解决方案
2020/11/11 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
新加坡一家在线男士皮具品牌:Faire Leather Co.
2019/12/01 全球购物
中间件分为哪几类
2016/09/18 面试题
幼儿园美术教学反思
2014/01/31 职场文书
大学生演讲稿
2014/04/25 职场文书
我的理想演讲稿
2014/04/30 职场文书
党员志愿者活动总结
2014/06/26 职场文书