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实现CheckBox的全选与取消全选的代码
Jul 20 Javascript
jquery动态增加删除表格行的小例子
Nov 14 Javascript
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 Javascript
Bootstrap导航条的使用和理解3
Dec 14 Javascript
Vue中v-for的数据分组实例
Mar 07 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 Javascript
基于JS判断对象是否是数组
Jan 10 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
判断Keep-Alive模式的HTTP请求的结束的实现代码
2011/08/06 PHP
解析argc argv在php中的应用
2013/06/24 PHP
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
php类自动加载器实现方法
2015/07/28 PHP
PHP实现蛇形矩阵,回环矩阵及数字螺旋矩阵的方法分析
2017/05/29 PHP
PHP底层运行机制与工作原理详解
2020/07/31 PHP
javascript 动态生成私有变量访问器
2009/12/06 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
一个简单的弹性返回顶部JS代码实现介绍
2013/06/09 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
利用JavaScript阻止表单提交的两种方法
2016/08/11 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
一个基于react的图片裁剪组件示例
2018/04/18 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
python中while循环语句用法简单实例
2015/05/07 Python
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
Python实现图片滑动式验证识别方法
2017/11/09 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
自我评价范文点评
2013/12/04 职场文书
传承焦裕禄精神思想汇报2014
2014/09/10 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
2015年社区工作总结
2015/04/08 职场文书
电影圆明园观后感
2015/06/03 职场文书
pytorch fine-tune 预训练的模型操作
2021/06/03 Python
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python
Vue3中的Refs和Ref详情
2021/11/11 Vue.js