Menú de navegación dinámica de varios niveles con el siguiente nivel

Autor：Eve Cole Fecha de actualización：2009-06-20 15:46:17

Después de ejecutar y ver el efecto, puede hacer clic en la flecha hacia abajo para expandir la tabla y hacer clic en el botón hacia arriba para reducirla. ¡Espero que te sea útil!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//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=gb2312" /> <title>www.downcodes.com< /title> <script language="javascript"> function tablecollapse() { /* Variables */ var colapsoClass='footcollapse'; var crashPic='; var expandPic=''; tablas var t=document.getElementsByTagName('table'); var checktest= new RegExp("(^|\s)" + colapsoClass + "(\s|$)"); <t.length;i++) { // si la tabla no tiene la clase correcta, omítala if(!checktest.test(t[i].className)){continue;} // haz que se pueda hacer clic en el pie de página t[i] .getElementsByTagName('tfoot')[0].onclick=function() { // recorrer todos los cuerpos de esta tabla y mostrarlos u ocultarlos // var tb=this.parentNode.getElementsByTagName('tbody'); i=0;i<tb.length;i++) { tb[i].style.display=tb[i].style.display=='none'?'':'none' } // cambia la imagen en consecuencia var li=this.getElementsByTagName('img')[0]; li.src=li.src.indexOf(collapsePic)==-1?collapsePic:expandPic; (initialCollapse) { var tb=t[i].getElementsByTagName('tbody'); for(var j=0;j<tb.length;j++) { tb[j].style.display='none'; // agrega la imagen rodeada por un enlace ficticio para permitir el acceso del teclado // a la última celda del pie de página var newa=document.createElement('a'); newa.href='#'; {return false;} var newimg=document.createElement('img'); newimg.src=initialCollapse?expandPic:collapsePic; var tf=t[i].getElementsByTagName('tfoot')[0]; getElementsByTagName('td')[tf.getElementsByTagName('td').length-1]; newa.appendChild(newimg); lt.insertBefore(newa,lt.firstChild); .onload=tablecollapse; </script> <estilo tipo="text/css"> cuerpo{ fuente-familia:Arial,Sans-Serif; fondo:#cc9; f8f8f8; relleno: 2em; ancho: 40em; } h1{ familia de fuentes: "Trebuchet MS", Sans-serif; transformación de texto: color: #696; :30em; } table.footcollapse caption{ tamaño de fuente: 120%; text-transform:mayúscula; text-align:left; padding:.5em 1em; ,table.footcollapse th,table.footcollapse th { border:none; border-collapse:collapse } table.footcollapse thead th { ancho:10em; borde-ancho:1px; #69c #69c #cff; fondo:#9cf; relleno: 2px 10px; } table.footcollapse tfoot th, table.footcollapse tfoot td { estilo de borde: sólido; ancho de borde: 1px; #369 #9cf; fondo:#69c; relleno:2px 10px; } table.footcollapse tbody{ fondo:#ddd; } table.footcollapse tbody; th{ relleno:2px 10px; borde:1px sólido #999; borde-izquierda:ninguno; } table.footcollapse tbody tr.odd{ fondo:#ccc } table.footcollapse tfoot img{ borde:ninguno; bottom; padding-left:10px; float:right; } </style> </head> <body> <table listening="CD que escuché recientemente" class="footcollapse"> <caption>Mis CD recientes</caption > <thead> <tr> <th>Título</th> <th>Artista</th> <th>Calidad</th> </tr> </thead> <tfoot> <tr> <th>Total< /th> <td colspan="2">5 CD</td> </tr> </tfoot> <tbody> <tr> <th>Frente 242</th> <td>Frente por frente</td> <td>Bastante bien</td> </tr> <tr class="odd"> <th>Miss Kittin</th> <td>i.com</td> <td>buena compra</td> < /tr> <tr> <th>Die Fantastischen Vier</th> <td>Viel</td> <td>Buen regreso</td> </tr> <tr class="odd"> <th>Nine Inch Clavos</th> <td>Con Dientes</td> <td>Oh si, por fin uno nuevo</td> </tr> <tr> <th>Basura</th> <td>Sangra como yo< /td> <td>Necesita escuchar más</td> </tr> </tbody> </table> <table Summary="DVDs que vi recientemente" class="footcollapse"> <caption>Mis DVD recientes</caption > <thead> <tr> <th>Título</th> <th>Calidad</th> </tr> </thead> <tfoot> <tr> <th>Total</th> <td>5 DVD </td> </tr> </tfoot> <tbody> <tr> <th>Star Trek TNG Temporada 7</th> <td>Lo perdieron</td> </tr> <tr class="odd "> <th>El gran pez</th> <td>Cuento maravilloso</td> </tr> <tr> <th>Más cerca</th> <td>¡Quiero recuperar mi tiempo!</td> </ tr> tr> <tr class="odd"> <th>Hot Shots</th> <td>Siempre vale la pena</td> </tr> <tr> <th>La fiesta</th> <td> Una pena que no haya más Vendedores</td> </tr> </tbody> </table> </body> </html>