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 相关文章推荐
HTML 自动伸缩的表格Table js实现
Apr 01 Javascript
实现JavaScript中继承的三种方式
Oct 16 Javascript
深入理解Javascript闭包 新手版
Dec 28 Javascript
javascript全局变量封装模块实现代码
Nov 28 Javascript
JavaScript模块化开发之SeaJS
Dec 13 Javascript
JavaScript实现的MD5算法完整实例
Feb 02 Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 Javascript
vue实现添加与删除图书功能
Oct 07 Javascript
微信小程序实现抖音播放效果的实例代码
Apr 11 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 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
PHP高自定义性安全验证码代码
2011/11/27 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
AngularJS 2.0入门权威指南
2016/10/08 Javascript
js闭包用法实例详解
2016/12/13 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
Jquery把获取到的input值转换成json
2017/05/15 jQuery
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
[00:12]DAC2018 Miracle-站上中单舞台,他能否再写奇迹?
2018/04/06 DOTA
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
python跳出双层for循环的解决方法
2019/06/24 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
Python os库常用操作代码汇总
2020/11/03 Python
通过实例解析python and和or使用方法
2020/11/14 Python
python 实现aes256加密
2020/11/27 Python
CSS3 分类菜单效果
2019/05/27 HTML / CSS
什么是Connection-oriented Protocol/Connectionless Protocol面向连接的协议/无连接协议
2012/09/06 面试题
写好求职信第一句话的技巧
2013/10/26 职场文书
户籍证明的格式
2014/01/13 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
Oracle锁表解决方法的详细记录
2022/06/05 Oracle