本文介绍了一个简单的网页折叠菜单实现方案，通过JavaScript控制显示与隐藏，适用于需要简洁菜单效果的场景。
网上菜单一堆，但打开人家的代码相当的长，是在看不下去，现在做一个简单的一次只显示一个的菜单给打架看看，不是很美观，我不会美工的，代码很简单就一个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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
