查看演示效果
织梦DedeCMS视频教程买空间 租服务器 选网硕互联！ 无忧站长工具,百度权重一键全查!
最简洁的仿QQ折叠菜单的实现，学习编写折叠菜单的好示例，自己把CSS美化一下，还是不错的效果。
<!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> <title>最简洁的仿QQ折叠菜单的实现</title> <meta http-equiv="mrc-type" mrc="text/html;charset=gb2312"> <style type="text/css"> .hide{display:none;} .show{display:block;} .pointer{cursor:pointer;} </style> </head> <body> <table id="menu" width="200" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000"> <!--Begin #--> <tr class="pointer" onclick="Menu(this);"> <td height="28" align="center"> <table width="150" border="0" cellpadding="0" cellspacing="0"> <tr align="center"> <td>模板无忧</td> </tr> </table> </td> </tr> <tr class="show"> <td align="center" valign="top"> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr><td align="center">最新更新</td></tr> <tr> <td align="center">下载排行</td></tr> </table> </td> </tr> <!--End #--> <!--Begin #--> <tr class="pointer" onclick="Menu(this);"> <td align="center"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr align="center"> <td>ASP源码</td> </tr> </table> </td> </tr> <tr class="hide"> <td align="center" valign="top"> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center">新闻文章</td></tr> <tr><td align="center">论坛社区</td></tr> </table> </td> </tr> <!--End #--> <!--Begin #--> <tr class="pointer" onclick="Menu(this);"> <td align="center" > <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr align="center"> <td>PHP源码</td> </tr> </table> </td> </tr> <tr class="hide"> <td align="center" valign="top"> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center">Ajax相关</td></tr><tr><td align="center">聊天留言</td></tr> </table> </td> </tr> <!--End #--> <!--Begin #--> <tr class="pointer" onclick="Menu(this);"> <td align="center"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr align="center"> <td>菜单四</td> </tr> </table> </td> </tr> <tr class="hide"> <td align="center" valign="top"> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center">菜单四内容一</td> </tr> <tr> <td align="center">菜单四内容二</td> </tr> </table> </td> </tr> <!--End #--> </table> <script language="javascript"> function Menu(obj) { var tb=document.getElementById("menu"); for(i=0;i<8;i++) { if(i % 2 ==1) { tb.rows[i].className="hide"; } } if(obj.className="pointer" ) { if(tb.rows(obj.rowIndex+1).className=="show") { tb.rows(obj.rowIndex+1).className="hide"; } else { tb.rows(obj.rowIndex+1).className="show"; } } } </script> </body> </html>