Menu de navegação dinâmica multinível com próximo nível

Autor：Eve Cole Data da Última Atualização：2009-06-20 15:46:17

Depois de executar e ver o efeito, você pode clicar na seta para baixo para expandir a tabela e clicar no botão para cima para reduzi-la! Espero que seja útil para você!

<!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=gb2312" /> <title>www.downcodes.com< /title> <script language="javascript"> function tablecollapse() { /* Variáveis */ var CollapseClass='footcollapse'; tabelas var t=document.getElementsByTagName('table var checktest= new RegExp("(^|\s)" + colapsoClass + "(\s|$)"); <t.length;i++) { // se a tabela não tiver a classe correta, pule-a if(!checktest.test(t[i].className)){continue;} // torna o rodapé clicável t[i] .getElementsByTagName('tfoot')[0].onclick=function() { // percorre todos os corpos desta tabela e mostra ou oculta // eles var tb=this.parentNode.getElementsByTagName('tbody'); i=0;i<tb.length;i++) { tb[i].style.display=tb[i].style.display=='none'?'':'none' } // altere a imagem de acordo 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'; // adiciona a imagem cercada por um link fictício para permitir o acesso // do teclado à última célula do rodapé var newa=document.createElement('a'); {retornar falso;} var newimg=document.createElement('img'); newimg.src=initialCollapse?expandPic:collapsePic; getElementsByTagName('td')[tf.getElementsByTagName('td').length-1]; newa.appendChild(newimg); lt.insertBefore(newa,lt.firstChild); .onload=tablecollapse; </script> <style type="text/css"> corpo{ font-family:Arial,Sans-Serif; f8f8f8; preenchimento:2em; largura:40em; } h1{ font-size:"Trebuchet MS",Sans-serif; :30em; } table.footcollapse caption{ font-size:120%; text-align:left; ,table.footcollapse th,table.footcollapse th { border:none; border-collapse:collapse; table.footcollapse thead { largura:10em; #69c #69c #cff; fundo:#9cf; preenchimento:2px 10px } table.footcollapse tfoot th, table.footcollapse tfoot td { border-style:solid; #369 #9cf; fundo:#69c; preenchimento:2px 10px; borda:1px sólido #999; th{ preenchimento:2px 10px; borda:1px sólido #999; borda esquerda: nenhum; table.footcollapse tbody tr.odd{ background:#ccc; bottom; padding-left:10px; float:right; } </style> </head> <body> <table summary="CDs que ouvi recentemente" class="footcollapse"> <caption>Meus CDs recentes</caption > <thead> <tr> <th>Título</th> <th>Artista</th> <th>Qualidade</th> </tr> </thead> <tfoot> <tr> <th>Total< /th> <td colspan="2">5 CDs</td> </tr> </tfoot> <tbody> <tr> <th>Frente 242</th> <td>Frente por Frente</td> <td>Muito bem</td> </tr> <tr class="odd"> <th>Senhorita Kittin</th> <td>i.com</td> <td>boa compra</td> < /tr> <tr> <th>Die Fantastischen Vier</th> <td>Viel</td> <td>Belo retorno</td> </tr> <tr class="odd"> <th>Nine Inch Unhas</th> <td>Com Dentes</td> <td>Ah, sim, finalmente uma nova</td> </tr> <tr> <th>Lixo</th> <td>Sangre como eu< /td> <td>Precisa ouvir mais</td> </tr> </tbody> </table> <table summary="DVDs que assisti recentemente" class="footcollapse"> <caption>Meus DVDs recentes</caption > <thead> <tr> <th>Título</th> <th>Qualidade</th> </tr> </thead> <tfoot> <tr> <th>Total</th> <td>5 DVDs </td> </tr> </tfoot> <tbody> <tr> <th>Star Trek TNG Temporada 7</th> <td>Eles perderam o controle</td> </tr> <tr class="odd "> <th>Peixe Grande</th> <td>Conto maravilhoso</td> </tr> <tr> <th>Mais perto</th> <td>Quero meu tempo de volta!</td> </ tr> tr> <tr class="odd"> <th>Hot Shots</th> <td>Sempre vale a pena</td> </tr> <tr> <th>A festa</th> <td> É uma pena que não haja mais vendedores</td> </tr> </tbody> </table> </body> </html>