JavaScript实现下拉菜单（鼠标、键盘操作）

来源：互联网发布：ea自动交易软件编辑：程序博客网时间：2024/06/13 22:40

今天在《JavaScript基础教程》中看到的一个例子。效果如下图：

功能：

①显示菜单；

②键盘Tab（选择）+Enter（click）键，选择和展开菜单；

③鼠标移动到链接上时，菜单展开，当鼠标离开展开菜单和链接时，关闭菜单

首先是HTML文件：

<!DOCTYPE html><html><head><title>Shakespeare's Plays</title><link rel="stylesheet" href="script03.css"><script src="script03.js"></script></head><body><h1>Shakespeare's Plays</h1><div><span style="white-space:pre"></span>//注意div里的内容<a href="menu1.html" class="menuLink">Comedies</a><ul class="menu" id="menu1"><li><a href="pg1.html">All's Well That Ends Well</a></li><li><a href="pg2.html">As You Like It</a></li><li><a href="pg3.html">Love's Labour's Lost</a></li><li><a href="pg4.html">The Comedy of Errors</a></li></ul></div><div><a href="menu2.html" class="menuLink">Tragedies</a><ul class="menu" id="menu2"><li><a href="pg5.html">Anthony & Cleopatra</a></li><li><a href="pg6.html">Hamlet</a></li><li><a href="pg7.html">Romeo & Juliet</a></li></ul></div><div><a href="menu3.html" class="menuLink">Histories</a><ul class="menu" id="menu3"><li><a href="pg8.html">Henry IV, Part 1</a></li><li><a href="pg9.html">Henry IV, Part 2</a></li></ul></div></body></html>

CSS设置文件：

body {background-color: #FFF;color: #000;}div {margin-bottom: 10px;width: 20em;background-color: #9CF;float: left;<span style="white-space:pre">//把垂直菜单转换为水平菜单}ul.menu {display: none;list-style-type: none;margin: 0;padding: 0;}ul.menu li {font: 1em arial, helvetica, sans-serif;padding-left: 10px;}a.menuLink, li a {text-decoration: none;color: #006;}a.menuLink {font-size: 1.2em;font-weight: bold;}ul.menu li a:hover {background-color: #006;color: #FFF;padding-right: 10px;}

JavaScript文件：

window.onload = initAll;function initAll() {var allLinks = document.getElementsByTagName("a");//创建包含页面上所有链接的数组for (var i=0; i<allLinks.length; i++) {if (allLinks[i].className.indexOf("menuLink") > -1) {//找到"class=menuLink"的链接allLinks[i].onmouseover = toggleMenu;//鼠标指针于其上时，调用toggleMenuallLinks[i].onclick = clickHandler;//鼠标或键盘点击时，调用clickHandler}}}function clickHandler(evt) {//处理不同浏览器在事件传递方面的差异if (evt) {if (typeof evt.target == "string") {toggleMenu(evt,evt.target);}else {toggleMenu(evt,evt.target.toString());}}else {toggleMenu(evt,window.event.srcElement.href);//传递伪evt对象和IE存储目标值的位置(菜单)}return false;}function toggleMenu(evt,currMenu) {if (toggleMenu.arguments.length < 2) {var currMenu = this.href;//若参数个数为0或1，得到键盘或鼠标点击目标的href(菜单名)--分析③}var startMenu = currMenu.lastIndexOf("/")+1;var stopMenu = currMenu.lastIndexOf(".");var thisMenuName = currMenu.substring(startMenu,stopMenu);//menu1(2、3).html取出menu1(2、3)var thisMenu = document.getElementById(thisMenuName);thisMenu.style.display = "block";thisMenu.parentNode.className = thisMenuName;//获得当前链接的父元素div，并将其class赋值为menu1或者menu2、menu3thisMenu.parentNode.onmouseout = function() {//鼠标指针离开div区域(区域内容看HTML文件)document.getElementById(this.className).style.display = "none";}thisMenu.parentNode.onmouseover = function() {//指针在div内document.getElementById(this.className).style.display = "block";}}

除了上面的注释，再分析下这段js代码：

①javascript的函数中，并不要求传递的参数个数和函数中定义的一样；

②隐藏和显示菜单的方法：

先得到style属性--x=document.getElementById(y.className).style；

隐藏：x.display='none';显示：x.display='block';

③本文中对浏览器差异，处理的三种传递参数的情况：

1.当浏览器是IE并通过鼠标触发toggleMenu()时，不传递参数<2

2.当浏览器不是IE并通过鼠标触发toggleMenu()时，传递一个参数（event对象）<2

上面两种情况需要下面的方式，获得被点击的菜单名

var currMenu = this.href;
3.当通过clickHandler()调用toggleMenu()时，传递两个参数（event对象和菜单名）

0 0