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

前端之家收集整理的这篇文章主要介绍了JavaScript实现下拉菜单的显示和隐藏前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我们这一篇来用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浏览器等。

效果图:

HTML代码

下拉<a href="https://www.jb51.cc/tag/caidan/" target="_blank" class="keywords">菜单</a>

猜你在找的JavaScript相关文章