JS实现菜单收缩
<html> <title>javascript MenuTest</title> <head> <script type="text/javascript" src ="Menu.js"></script> </head> <body> <table width="174"> <tr> <td bgcolor="#99CCFF"><a href="javascript:showMenu(lay0)">language</a></td> </tr> <tr id="lay0" style="display:none;"> <td> <table width="100%" border="0" cellspacing="0"> <tr> <td width="20%"></td> <td width="80%"><a href="" target="_blank">JAVA</a></td> </tr> <tr> <td width="20%"></td> <td width="80%"><a href="" target="_blank">Ruby</a></td> </tr> <tr> <td width="20%"></td> <td width="80%"><a href="" target="_blank">C</a></td> </tr> </table> </td> </tr> <tr> <td bgcolor="#99CCFF"><a href="javascript:showMenu(lay1)">Flash</a></td> </tr> <tr id="lay1" style="display:none;"> <td> <table width="100%" border="0" cellspacing="0"> <tr> <td width="20%"></td> <td width="80%"><a href="" target="_blank">FLASH - 1</a></td> </tr> <tr> <td width="20%"></td> <td width="80%"><a href="" target="_blank">FLASH - 2</a></td> </tr> <tr> <td width="20%"></td> <td width="80%"><a href="" target="_blank">FLASH - 3</a></td> </tr> </table> </td> </tr> </table> </body></html>
function showMenu(strID){ var i; for(i=0;i<2;i++){ var lay; lay = eval('lay' + i); if (lay.style.display=="block" && lay != eval(strID)){ lay.style.display = "none"; } } if (strID.style.display=="none"){ strID.style.display = "block"; }else{ strID.style.display = "none"; }}
相关资源:JS树形结构菜单展开收缩代码.zip