<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>弹出菜单</title>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
window.onload=function () {
var list,menus=[];
list=getByClass('menu')[0];
var lis=list.childNodes;
var li,a,div,obj;
for (var i=0;i<lis.length;i++) {
if (lis[i].tagName=='LI') {
a=firstChild(lis[i]);
div=next(a);
obj={
btn:a,
item:div
};
menus.push(obj);
a.relatedItems=obj; //这里的relatedItems是什么用法????
div.relatedItems=obj;
a.onmouseover=function (evt) {
this.relatedItems.item.style.display="block";
};
div.onmouseout=function () {
this.style.display="none";
};
a.onmouseout=function (evt) {
evt=evt||window.event;
if (evt.toElement==this.relatedItems.item){
return;
}
this.relatedItems.item.style.display="none";
};
}
}};
function firstChild(node) {//返回指定节点的第一个子元素
if (node.firstChild) {
if (node.firstChild.nodeType==1) return node.firstChild;
else {
var n=node.firstChild;
while(n=n.nextSibling) {
if (n.nodeType==1) return n;
}
return null;
}
}
return null;
}
function next(node) {//返回node的下一个兄弟元素
if (node.nextSibling) {
if (node.nextSibling.nodeType==1) return node.nextSibling;
else {
var n=node.nextSibling;
while(n=n.nextSibling) {
if (n.nodeType==1) return n;
}
return null;
}
}
return null;
}
function lastChild() {
}
function getByClass(className,context) {
context=context || document;
if (context.getElementsByClassName) {
return context.getElementsByClassName(className);
}
var nodes=context.getElementsByTagName('*'),
ret=[];
for (var i=0;i<nodes.length;i++) {
if (hasClass(nodes[i],className)) ret.push(nodes[i]);
}
return ret;
}
function hasClass(node,className) {
var names=node.className.split(/\s+/);
for (var i=0;i<names.length;i++) {
if (names[i]==className) return true;
}
return false;
}
function fixEvent(evt) {
if (!evt.target) {
evt.target = evt.srcElement;
evt.preventDefault = fixEvent.preventDefault;
evt.stopPropagation = fixEvent.stopPropagation;
if (evt.type == "mouseover") {
evt.relatedTarget = evt.fromElement;
} else if (evt.type =="mouseout") {
evt.relatedTarget = evt.toElement;
}
evt.charCode = (evt.type=="keypress")?evt.keyCode:0;
evt.eventPhase = 2;//IE仅工作在冒泡阶段
evt.timeStamp = (new Date()).getTime();//仅将其设为当前时间
}
return evt;
}
fixEvent.preventDefault =function () {
this.returnValue = false;//这里的this指向了某个事件对象,而不是fixEvent
};
fixEvent.stopPropagation =function () {
this.cancelBubble = true;
};
</script>
<style type="text/css">
ul.menu {
width:300px;
height:30px;
}
ul.menu li {
display:block;
width:80px;
float:left;
height:20px;
border:2px ridge aqua;
margin:2px;
text-align:center;
}
ul.menu li a {
display:block;
width:80px;
height:20px;
background:yellow;
}
ul.menu li div {
display:none;
width:180px;
height:60px;
background:pink;
}
</style>
</head>
<body class="redStyle">
<ul class="menu"> <!--Comment-->
<li>
<a href="###">按钮A</a>
<div>内容A</div>
</li>
<li>
<a href="###">按钮B</a>
<div>内容B</div>
</li>
<li>
<a href="###">按钮C</a>
<div>内容C</div>
</li>
</ul>
</body>
</html>
<html>
<head>
<title>弹出菜单</title>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
window.onload=function () {
var list,menus=[];
list=getByClass('menu')[0];
var lis=list.childNodes;
var li,a,div,obj;
for (var i=0;i<lis.length;i++) {
if (lis[i].tagName=='LI') {
a=firstChild(lis[i]);
div=next(a);
obj={
btn:a,
item:div
};
menus.push(obj);
a.relatedItems=obj; //这里的relatedItems是什么用法????
div.relatedItems=obj;
a.onmouseover=function (evt) {
this.relatedItems.item.style.display="block";
};
div.onmouseout=function () {
this.style.display="none";
};
a.onmouseout=function (evt) {
evt=evt||window.event;
if (evt.toElement==this.relatedItems.item){
return;
}
this.relatedItems.item.style.display="none";
};
}
}};
function firstChild(node) {//返回指定节点的第一个子元素
if (node.firstChild) {
if (node.firstChild.nodeType==1) return node.firstChild;
else {
var n=node.firstChild;
while(n=n.nextSibling) {
if (n.nodeType==1) return n;
}
return null;
}
}
return null;
}
function next(node) {//返回node的下一个兄弟元素
if (node.nextSibling) {
if (node.nextSibling.nodeType==1) return node.nextSibling;
else {
var n=node.nextSibling;
while(n=n.nextSibling) {
if (n.nodeType==1) return n;
}
return null;
}
}
return null;
}
function lastChild() {
}
function getByClass(className,context) {
context=context || document;
if (context.getElementsByClassName) {
return context.getElementsByClassName(className);
}
var nodes=context.getElementsByTagName('*'),
ret=[];
for (var i=0;i<nodes.length;i++) {
if (hasClass(nodes[i],className)) ret.push(nodes[i]);
}
return ret;
}
function hasClass(node,className) {
var names=node.className.split(/\s+/);
for (var i=0;i<names.length;i++) {
if (names[i]==className) return true;
}
return false;
}
function fixEvent(evt) {
if (!evt.target) {
evt.target = evt.srcElement;
evt.preventDefault = fixEvent.preventDefault;
evt.stopPropagation = fixEvent.stopPropagation;
if (evt.type == "mouseover") {
evt.relatedTarget = evt.fromElement;
} else if (evt.type =="mouseout") {
evt.relatedTarget = evt.toElement;
}
evt.charCode = (evt.type=="keypress")?evt.keyCode:0;
evt.eventPhase = 2;//IE仅工作在冒泡阶段
evt.timeStamp = (new Date()).getTime();//仅将其设为当前时间
}
return evt;
}
fixEvent.preventDefault =function () {
this.returnValue = false;//这里的this指向了某个事件对象,而不是fixEvent
};
fixEvent.stopPropagation =function () {
this.cancelBubble = true;
};
</script>
<style type="text/css">
ul.menu {
width:300px;
height:30px;
}
ul.menu li {
display:block;
width:80px;
float:left;
height:20px;
border:2px ridge aqua;
margin:2px;
text-align:center;
}
ul.menu li a {
display:block;
width:80px;
height:20px;
background:yellow;
}
ul.menu li div {
display:none;
width:180px;
height:60px;
background:pink;
}
</style>
</head>
<body class="redStyle">
<ul class="menu"> <!--Comment-->
<li>
<a href="###">按钮A</a>
<div>内容A</div>
</li>
<li>
<a href="###">按钮B</a>
<div>内容B</div>
</li>
<li>
<a href="###">按钮C</a>
<div>内容C</div>
</li>
</ul>
</body>
</html>
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货