Tip: you can modify some code before running
<!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>Javascript foldable display effect tree-type navigation menu effect</title><style type="text/css">Table {border-collapse: collapse} td {font-size: 12px; text-indent: 2em; height: 30px ;}</style></head><body><script language="javascript" id="clientEventHandlersJS"><!--var number=8;function LMYC() {var lbmc;//var treePic; for (i=1;i<=number;i++) { lbmc = eval('LM' + i); //treePic = eval('treePic'+i); //treePic.src = 'images/file.gif'; lbmc.style.display = 'none'; }} function ShowFLT(i) { lbmc = eval('LM' + i); //treePic = eval('treePic' + i) if (lbmc.style.display == 'none') { LMYC(); //treePic.src = 'images/nofile.gif'; lbmc.style.display = ''; } else { //treePic.src = 'images/file.gif'; lbmc.style.display = 'none'; }}//--></script><table width="200" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC"> <tr> <td >+ Document management product</td> </tr> <tr id="LM1" > <td><table cellspacing="0" cellpadding="0" width="100%" border="0"> <tr> <td >-Folder</td> </tr> <tr> <td >-Data volume</td> </tr> <tr> <td >-Portfolio</td> </tr> <tr> <td >-File box</td> </tr> <tr> <td >-File cabinet</td> </tr> <tr> <td >-Briefcase</td> </tr> </table></td> </tr> <tr> <td>+ Desktop stationery</td> </tr> <tr id="LM2" > <td><table cellspacing="0" cellpadding="0" width="100%" border="0"> <tr> <td >-Pen cutting machine</td> </tr> <tr> <td >-Stapler</td> </tr> </table></td> </tr> <tr> <td>+ Commercial machines</td> </tr> <tr id="LM3" > <td><table cellspacing="0" cellpadding="0" width="100%" border="0"> <tr> <td >-Shredder</td> </tr> <tr> <td >-Paper cutter</td> </tr> </table></td> </tr> <tr> <td>+ Writing tools</td> </tr> <tr id="LM4"> <td><table cellspacing="0" cellpadding="0" width="100%" border="0"> <tr> <td >-Gel pen</td> </tr> <tr> <td >-Ballpoint pen</td> </tr> <tr> <td >-Marker</td> </tr> <tr> <td >-Whiteboard pen</td> </tr> </table></td> </tr> <tr> <td>+ Paper products</td> </tr> <tr id="LM5" > <td><table cellspacing="0" cellpadding="0" width="100%" border="0"> <tr> <td >-Copy paper</td> </tr> <tr> <td >-Copy paper</td> </tr> <tr> <td >-Copy paper</td> </tr> <tr> <td >-Notepaper</td> </tr> <tr> <td >-Baishi Post</td> </tr> <tr> <td >-Leather notebook</td> </tr> </table></td> </tr> <tr> <td>+ Office electronics</td> </tr> <tr id="LM6" > <td><table cellspacing="0" cellpadding="0" width="100%" border="0"> <tr> <td >-Calculator</td> </tr> </table></td> </tr> <tr> <td>+ It peripheral products</td> </tr> <tr id="LM7" > <td><table cellspacing="0" cellpadding="0" width="100%" border="0"> <tr> <td >-Reading frame</td> </tr> <tr> <td >-CD protection</td> </tr> <tr> <td >-Optical box</td> </tr> </table></td> </tr> <tr> <td>+ Office supplies</td> </tr> <tr id="LM8" > <td><table cellspacing="0" cellpadding="0" width="100%" border="0"> <tr> <td >-Cleaner</td> </tr> <tr> <td >-Whiteboard</td> </tr> <tr> <td >-Mesh stationery</td> </tr> <tr> <td >-Enclosure</td> </tr> <tr> <td >-Shopping bag</td> </tr> </table></td> </tr></table></body></html></td> </tr></table>
Tip: you can modify some code before running
