Js implementation of the folded navigation example

  • 2020-03-30 00:39:40
  • OfStack

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
<meta http-equiv=content-type content="text/html; charset=utf-8" /> 
<link href="css/admin.css" type="text/css" rel="stylesheet" /> 
<script language=javascript> 
function expand(el)//The id is passed, 1,2,3 is used to identify the category to which it belongs
{ 
childobj = document.getElementById("child" + el);//child1,child2..... 
if (childobj.style.display == 'none')//If this element divisions none, it will not be displayed
{ 
childobj.style.display = 'block';//If it's a block. It will appear as a block-level element
} 
else 
{ 
childobj.style.display = 'none';//When clicked again, it will be hidden again
} 
return; 
} 
</script> 
</head> 
<body> 
<table height="100%" cellspacing=0 cellpadding=0 width=170 
background=./img/menu_bg.jpg border=0> 
<tr> 
<td valign=top align=middle> 
<table cellspacing=0 cellpadding=0 width="100%" border=0> 
<tr> 
<td height=10></td> 
</tr> 
</table> 
<table cellspacing=0 cellpadding=0 width=150 border=0> 
<tr height=22> 
<td style="padding-left: 30px" background=./img/menu_bt.jpg> 
<a class=menuparent onclick=expand(1) href="javascript:void(0);"> Personnel management </a></td></tr> 
<tr height=4> 
<td></td></tr></table> 
<table id=child1 style="display: none" cellspacing=0 cellpadding=0 
width=150 border=0> 
<tr height=20> 
<td align=middle width=30><img height=9 
src="./img/menu_icon.gif" width=9></td> 
<td><a class=menuchild 
href="memberadd.jsp" 
target=right> The increase </a></td></tr> 
<tr height=20> 
<td align=middle width=30><img height=9 
src="./img/menu_icon.gif" width=9></td> 
<td><a class=menuchild 
href="#" 
target=right> Personnel changes </a></td></tr> 
<tr height=20> 
<td align=middle width=30><img height=9 
src="./img/menu_icon.gif" width=9></td> 
<td><a class=menuchild 
href="#" 
target=right> Staff to delete </a></td></tr> 
<tr height=20> 
<td align=middle width=30><img height=9 
src="./img/menu_icon.gif" width=9></td> 
<td><a class=menuchild 
href="#" 
target=right> Researchers find </a></td></tr> 
<tr height=4> 
<td colspan=2></td> 
</tr> 
</table> 
</body> 
</html> 

Related articles: