列表抽缩
列表收缩
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> table{ border:#0066FF 1px solid; } table td{ border:#0000FF 1px solid; background-color:#00CCFF; } table td div{ background-color:#66FFCC; display:none; } table td a:link,table td a:visited{ text-decoration:none; color:#993300; } .open{ display:block; } .close{ display:none; } </style> <script type="text/javascript"> function list2() { var aNode = event.srcElement; var tdNode = aNode.parentNode; var divNode = tdNode.getElementsByTagName("div")[0]; //alert(divNode.nodeName); var tabNode = document.getElementsByTagName("table")[0]; var divNodes = tabNode.getElementsByTagName("div"); for(var x=0 ; x<divNodes.length; x++) { if(divNodes[x]==divNode) { if(divNode.className == "open") { divNode.className = "close"; } else { divNode.className = "open"; } } else divNodes[x].className = "close"; } } </script> </head> <body> <table> <tr> <td> <a href="javascript:void(0)" onclick="list2()">好友菜单列表</a> <div> 撒旦防撒旦法<br/> 撒旦防撒旦法<br/> 撒旦防撒旦法<br/> 撒旦防撒旦法<br/> 撒旦防撒旦法<br/> </div> </td> </tr> <tr> <td> <a href="javascript:void(0)" onclick="list2()">好友菜单列表</a> <div> 撒旦防撒旦法<br/> 撒旦防撒旦法<br/> 撒旦防撒旦法<br/> 撒旦防撒旦法<br/> 撒旦防撒旦法<br/> </div> </td> </tr> <tr> <td> <a href="javascript:void(0)" onclick="list2()">好友菜单列表</a> <div> 撒旦防撒旦法<br/> 撒旦防撒旦法<br/> 撒旦防撒旦法<br/> 撒旦防撒旦法<br/> 撒旦防撒旦法<br/> </div> </td> </tr> <tr> <td> <a href="javascript:void(0)" onclick="list2()">好友菜单列表</a> <div> 撒旦防撒旦法<br/> 撒旦防撒旦法<br/> 撒旦防撒旦法<br/> 撒旦防撒旦法<br/> 撒旦防撒旦法<br/> </div> </td> </tr> <tr> <td> <a href="javascript:void(0)" onclick="list2()">好友菜单列表</a> <div> 撒旦防撒旦法<br/> 撒旦防撒旦法<br/> 撒旦防撒旦法<br/> 撒旦防撒旦法<br/> 撒旦防撒旦法<br/> </div> </td> </tr> <tr> <td> <a href="javascript:void(0)" onclick="list2()">好友菜单列表</a> <div> 撒旦防撒旦法<br/> 撒旦防撒旦法<br/> 撒旦防撒旦法<br/> 撒旦防撒旦法<br/> 撒旦防撒旦法<br/> </div> </td> </tr> </table> </body> </html>