基于JavaScript的动态菜单的制作方法
<!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>
<title>JavaScript制作动态菜单</title>
<style type="text/css">
#parent > li
{
list-style-type: none;
float: left;
width: 150px;
background-color: #EECBAD;
text-align: center;
border-width: thin;
border-style: solid;
border-color: Black;
}
.hide
{
display: none;
}
.show
{
list-style-type: none;
display: block;
margin: 0px;
padding: 0px;
background-color: #CDC9C9;
}
</style>
<script type="text/javascript">
//子菜单显示时的调用方法
function show() {
var ul = this.getElementsByTagName("ul");
for (var i = 0; i < ul.length; i++) {
if (ul[i].className == "hide") {
ul[i].className = "show";
}
}
}
//body初始化方法
function init() {
var ul = document.getElementById("parent");
var lis = ul.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = show;
//此处使用匿名函数来代替调用函数
lis[i].onmouseout = function () {
var ul = this.getElementsByTagName("ul");
for (var i = 0; i < ul.length; i++) {
if (ul[i].className == "show") {
ul[i].className = "hide"
}
}
}
}
}
</script>
</head>
<body onload="init()">
<ul id="parent">
<li>文件
<ul class="hide">
<li>新建</li>
<li>打开</li>
<li>关闭</li>
</ul>
</li>
<li>编辑
<ul class="hide">
<li>复制</li>
<li>粘贴</li>
<li>剪切</li>
</ul>
</li>
<li>视图
<ul class="hide">
<li>解决方案管理器</li>
<li>CSS属性</li>
<li>管理样式</li>
</ul>
</li>
<li>项目
<ul class="hide">
<li>添加类</li>
<li>添加新项</li>
<li>生成</li>
</ul>
</li>
</ul>
</body>
</html>
