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 KeyDown、KeyPress和KeyUp事件的区别与联系
Dec 03 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
JavaScript内存管理介绍
Mar 13 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 Javascript
浅谈JavaScript中数组的增删改查
Jun 20 Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 Javascript
原生js实现移动端Touch轮播图的方法步骤
Jan 03 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 Javascript
layui写后台表格思路和赋值用法详解
Nov 14 Javascript
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
js 实现Material UI点击涟漪效果示例
Sep 23 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
建立文件交换功能的脚本(一)
2006/10/09 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
php中socket通信机制实例详解
2015/01/03 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
php中的常用魔术方法汇总
2016/02/14 PHP
yii2使用ajax返回json的实现方法
2016/05/14 PHP
php的4种常用运行方式详解
2016/12/22 PHP
Google韩国首页图标动画效果
2007/08/26 Javascript
javascript 常用关键字列表集合
2007/12/04 Javascript
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
jquery multiSelect 多选下拉框
2010/07/09 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
React-router中结合webpack实现按需加载实例
2017/05/25 Javascript
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
基于webpack.config.js 参数详解
2018/03/20 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
js实现for循环跳过undefined值示例
2019/07/02 Javascript
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
python合并文本文件示例
2014/02/07 Python
python TF-IDF算法实现文本关键词提取
2019/05/29 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
意大利自行车商店:Cingolani Bike Shop
2019/09/03 全球购物
商场主管竞聘书
2014/03/31 职场文书
检讨书范文500字
2015/01/28 职场文书
Golang 实现WebSockets
2022/04/24 Golang