网上菜单一堆,但打开人家的代码相当的长,是在看不下去,现在做一个简单的一次只显示一个的菜单给打架看看,不是很美观,我不会美工的,代码很简单就一个fold函数。代码如下:
< html >
< head >
< TITLE > 一次只显示一个菜单 </ TITLE >
< META NAME = " Generator " CONTENT = " EditPlus " >
< META NAME = " Author " CONTENT = "" >
< META NAME = " Keywords " CONTENT = " 教务在线系统 " >
< META NAME = " Description " CONTENT = " 教务在线系统 " >
< SCRIPT LANGUAGE = " JavaScript " >
<!--
function fold() ... {
var len = document.getElementsByTagName("span").length;
var obj = event.srcElement;//获取当前点击的对象(这里就是span元素)
for(i = 0;i<len;i++)...{
var element = document.getElementsByTagName("span")[i];
var parent = element.parentNode.children(1) ;
if(element == obj)...{ //判断当前点击的span元素是否和当前遍历的span元素是同一个对象
parent.style.display = parent.style.display == "block"?'none':"block";
}
else...{
parent.style.display = 'none';
}
}
}
// -->
</ SCRIPT >
< style >
/**/ /*应用院系等折叠式菜单*/
.deplist ... {
border:1 solid #000;
font-size:10pt;font-weight:bold;
margin:0;
background-color:#F8FBFF; color:#330066;
width:100px;;height:20px;
text-align:center;
}
.deplist li ... {
list-style-type:none;
list-style-position:outside;
background-color:#FFF;padding-top:5px;
display:none;
}
.deplist span ... {
float:right;
cursor:hand;
color:#330066;
text-align:center;
width:100%;
}
table ... {
width:100%;
}
td ... {
text-align:center;
font-size:10pt;
color:#828282;
}
</ style >
< body >
< ul class = deplist >< span onclick = " fold() " > 菜单一 </ span >
< li >
< table border = 1 cellspacing = 0 >
< tr >
< td > 内容一 </ td >
</ tr >
< tr >
< td > 内容二 </ td >
</ tr >
< tr >
< td > 内容三 </ td >
</ tr >
< tr >
< td > 内容四 </ td >
</ tr >
</ table >
</ li >
</ ul >
< ul class = deplist >< span onclick = " fold() " > 菜单二 </ span >
< li >
< table border = 1 cellspacing = 0 >
< tr >
< td > 内容一 </ td >
</ tr >
< tr >
< td > 内容二 </ td >
</ tr >
< tr >
< td > 内容三 </ td >
</ tr >
< tr >
< td > 内容四 </ td >
</ tr >
</ table >
</ li >
</ ul >
< ul class = deplist >< span onclick = " fold() " > 菜单三 </ span >
< li >
< table border = 1 cellspacing = 0 >
< tr >
< td > 内容一 </ td >
</ tr >
< tr >
< td > 内容二 </ td >
</ tr >
< tr >
< td > 内容三 </ td >
</ tr >
< tr >
< td > 内容四 </ td >
</ tr >
</ table >
</ li >
</ ul >
</ body >
</ html >
< html >
< head >
< TITLE > 一次只显示一个菜单 </ TITLE >
< META NAME = " Generator " CONTENT = " EditPlus " >
< META NAME = " Author " CONTENT = "" >
< META NAME = " Keywords " CONTENT = " 教务在线系统 " >
< META NAME = " Description " CONTENT = " 教务在线系统 " >
< SCRIPT LANGUAGE = " JavaScript " >
<!--
function fold() ... {
var len = document.getElementsByTagName("span").length;
var obj = event.srcElement;//获取当前点击的对象(这里就是span元素)
for(i = 0;i<len;i++)...{
var element = document.getElementsByTagName("span")[i];
var parent = element.parentNode.children(1) ;
if(element == obj)...{ //判断当前点击的span元素是否和当前遍历的span元素是同一个对象
parent.style.display = parent.style.display == "block"?'none':"block";
}
else...{
parent.style.display = 'none';
}
}
}
// -->
</ SCRIPT >
< style >
/**/ /*应用院系等折叠式菜单*/
.deplist ... {
border:1 solid #000;
font-size:10pt;font-weight:bold;
margin:0;
background-color:#F8FBFF; color:#330066;
width:100px;;height:20px;
text-align:center;
}
.deplist li ... {
list-style-type:none;
list-style-position:outside;
background-color:#FFF;padding-top:5px;
display:none;
}
.deplist span ... {
float:right;
cursor:hand;
color:#330066;
text-align:center;
width:100%;
}
table ... {
width:100%;
}
td ... {
text-align:center;
font-size:10pt;
color:#828282;
}
</ style >
< body >
< ul class = deplist >< span onclick = " fold() " > 菜单一 </ span >
< li >
< table border = 1 cellspacing = 0 >
< tr >
< td > 内容一 </ td >
</ tr >
< tr >
< td > 内容二 </ td >
</ tr >
< tr >
< td > 内容三 </ td >
</ tr >
< tr >
< td > 内容四 </ td >
</ tr >
</ table >
</ li >
</ ul >
< ul class = deplist >< span onclick = " fold() " > 菜单二 </ span >
< li >
< table border = 1 cellspacing = 0 >
< tr >
< td > 内容一 </ td >
</ tr >
< tr >
< td > 内容二 </ td >
</ tr >
< tr >
< td > 内容三 </ td >
</ tr >
< tr >
< td > 内容四 </ td >
</ tr >
</ table >
</ li >
</ ul >
< ul class = deplist >< span onclick = " fold() " > 菜单三 </ span >
< li >
< table border = 1 cellspacing = 0 >
< tr >
< td > 内容一 </ td >
</ tr >
< tr >
< td > 内容二 </ td >
</ tr >
< tr >
< td > 内容三 </ td >
</ tr >
< tr >
< td > 内容四 </ td >
</ tr >
</ table >
</ li >
</ ul >
</ body >
</ html >