您的位置：首页 > Web前端 > JavaScript

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

2014-06-16 16:55 399 查看

今天在《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;	//鼠标指针于其上时，调用toggleMenu
			allLinks[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、menu3
	thisMenu.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对象和菜单名）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航