js实例教程一：用js实现竖的隐藏菜单
浏览数：28 /
时间：2015年06月09日
主要代码：
<SCRIPT language="javascript">
function showsubmenu(sid){
var ele;
//先关闭其他的
for(var i=1;i<10;i++){
ele = document.getElementById("submenu" + i);
if(ele!=null && i!=sid){
ele.style.display="none";
}
}
//显示点击的菜单
whichEl = document.getElementById("submenu" + sid);
if (whichEl.style.display == "none"){
whichEl.style.display="";
}else{
whichEl.style.display="none";
}
}
</SCRIPT> 实现思路：通过获取竖立表格的各行元素，用ele.style.display="none";和whichEl.style.display="";分别控制达到隐藏和显示的作用。
完整示例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../css/css.css" rel="stylesheet" type="text/css">
<title></title>
<style type=text/css>
SCROLLBAR-FACE-COLOR: #9999CC;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #39867B; SCROLLBAR-3DLIGHT-COLOR: #39867B; SCROLLBAR-ARROW-COLOR: #330000; SCROLLBAR-TRACK-COLOR: #E1E1FF; SCROLLBAR-DARKSHADOW-COLOR: #ffffff;}
table { border:0px; }
td { font:normal 12px 宋体; }
img { vertical-align:bottom; border:0px; }
a { font:normal 12px 宋体; color:#000000; text-decoration:none; }
a:hover { color:#cc0000;text-decoration:underline; }
.sec_menu { border-left:1px solid white; border-right:1px solid white; border-bottom:1px solid white; overflow:hidden; background:#FFFFCC; }
.menu_title { }
.menu_title span { position:relative; top:2px; left:8px; color:#39867B; font-weight:bold; }
.menu_title2 { }
.menu_title2 span { position:relative; top:2px; left:8px; color:#cc0000; font-weight:bold; }
</style>
<SCRIPT language="javascript">
function showsubmenu(sid){
var ele;
//先关闭其他的
for(var i=1;i<10;i++){
ele = document.getElementById("submenu" + i);
if(ele!=null && i!=sid){
ele.style.display="none";
}
}
//显示点击的菜单
whichEl = document.getElementById("submenu" + sid);
if (whichEl.style.display == "none"){
whichEl.style.display="";
}else{
whichEl.style.display="none";
}
}
</SCRIPT>
<BODY leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">
<table width=100% cellpadding=0 cellspacing=0 border=0 align=left>
<tr>
<td valign=top>
<table width="177" border="0" align=center cellpadding=0 cellspacing=0 bgcolor="#7EAAEB">
<tr>
<td width="177" height=30 valign=bottom> </td>
</tr>
</table>
<table width="177" height="0" align=center cellpadding=0 cellspacing=0 bgcolor="#D9E8FE">
<tr>
<td height="25" class="menu_title" id="menuTitle1" style="cursor:hand;" onclick="showsubmenu(1)" onmouseover="this.className='menu_title2';" onmouseout="this.className='menu_title';">
<span>项目类别管理</span></td>
</tr>
<tr>
<td height="0" id="submenu1" style="display:none">
<div class="sec_menu" style="width:177">
<table cellpadding=0 cellspacing=0 align=center width=131>
<tr>
<td width="165" height=20>
<a href="/ProjectManager/projectCat?submitFlag=toTreeMain" target="mainFrame">项目类别维护</a>
</td>
</tr>
<tr>
<td width="165" height=20>
<a href="/ProjectManager/projectPlan?submitFlag=toTreeMain" target="mainFrame">类别计划维护</a>
</td>
</tr>
</table>
</div>
<div style="width:177">
<table cellpadding=0 cellspacing=0 align=center>
<tr>
<td height=10></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<table width="177" height="0" align=center cellpadding=0 cellspacing=0 bgcolor="#D9E8FE">
<tr>
<td height="25" class="menu_title" id="menuTitle1" style="cursor:hand;" onclick="showsubmenu(2)" onmouseover="this.className='menu_title2';" onmouseout="this.className='menu_title';">
<span>项目计划管理</span></td>
</tr>
<tr>
<td height="0" id="submenu2" style="display:none">
<div class="sec_menu" style="width:177">
<table cellpadding=0 cellspacing=0 align=center width=131>
<tr>
<td width="165" height=20>
<a href="/ProjectManager/projectplan/add.jsp" target="mainFrame">项目计划新增</a>
</td>
</tr>
<tr>
<td width="165" height=20>
<a href="/ProjectManager/projectPlan?submitFlag=query&state=1" target="mainFrame">草拟计划列表</a>
</td>
</tr>
</table>
</div>
<div style="width:177">
<table cellpadding=0 cellspacing=0 align=center>
<tr>
<td height=10></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<table width="177" height="0" align=center cellpadding=0 cellspacing=0 bgcolor="#D9E8FE">
<tr>
<td height="25" class="menu_title" id="menuTitle1" style="cursor:hand;" onclick="showsubmenu(3)" onmouseover="this.className='menu_title2';" onmouseout="this.className='menu_title';">
<span>项目审核管理</span></td>
</tr>
<tr>
<td height="0" id="submenu3" style="display:none">
<div class="sec_menu" style="width:177">
<table cellpadding=0 cellspacing=0 align=center width=131>
<tr>
<td width="65" height=20>
<a href="default.html" target="mainFrame">待审核列表</a>
</td>
</tr>
<tr>
<td width="65" height=20>
<a href="default.html" target="mainFrame">已审核列表</a>
</td>
</tr>
</table>
</div>
<div style="width:177">
<table cellpadding=0 cellspacing=0 align=center>
<tr>
<td height=10></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<table width="177" height="0" align=center cellpadding=0 cellspacing=0 bgcolor="#D9E8FE">
<tr>
<td height="25" class="menu_title" id="menuTitle1" style="cursor:hand;" onclick="showsubmenu(4)" onmouseover="this.className='menu_title2';" onmouseout="this.className='menu_title';">
<span>工作列表管理</span></td>
</tr>
<tr>
<td height="0" id="submenu4" style="display:none">
<div class="sec_menu" style="width:177">
<table cellpadding=0 cellspacing=0 align=center width=131>
<tr>
<td width="165" height=20>
<a href="/ProjectManager/workList?submitFlag=toWaitAuditList" target="mainFrame">待审核的工作列表</a>
</td>
</tr>
<tr>
<td width="165" height=20>
<a href="/ProjectManager/workList?submitFlag=toWaitUpdateList" target="mainFrame">待修改的工作列表</a>
</td>
</tr>
<tr>
<td width="165" height=20>
<a href="/ProjectManager/workList?submitFlag=toWaitViewList" target="mainFrame">待查看的工作列表</a>
</td>
</tr>
<tr>
<td width="165" height=20>
<a href="default.html" target="mainFrame">已完成工作列表</a>
</td>
</tr>
</table>
</div>
<div style="width:177">
<table cellpadding=0 cellspacing=0 align=center>
<tr>
<td height=10></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
效果：
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
