O código JavaScript é o seguinte:
$ (document) .ready (function () {$ (". message_list .message_body: gt (0)"). hide (); $ (". message_list li: gt (4)"). hide (); $ (". Mensagens (". li: gt (4) "). slidown () retorna false;}); // mostra apenas as mensagens mais recentes $ (". show_recent_only "). clique (function () {$ (this) .hide () $ (". Show_all_message "). Show () $ (".Parte do Código de CSS é a seguinte:
* {margem: 0; preenchimento: 0; } corpo {margem: 10px automático; Largura: 570px; Fonte: 75%/120% Arial, Helvetica, Sans-Serif; } p {preenchimento: 0 0 1em; } .message_list {estilo de lista: nenhum; margem: 0; preenchimento: 0; Largura: 383px; } .message_list li {preenchimento: 0; margem: 0; Antecedentes: URL (imagens/mensagem-bar.gif) sem repetição; } .message_head {preenchimento: 5px 10px; Cursor: Ponteiro; Posição: relativa; } .message_head .timestamp {color: #666666; tamanho de fonte: 95%; Posição: Absoluto; Direita: 10px; topo: 5px; } .message_head cite {font-size: 100%; Peso da fonte: negrito; estilo de fonte: normal; } .message_body {preenchimento: 5px 10px 15px; } .collapse_buttons {text-align: right; Top de borda: sólido 1px #e4e4e4; preenchimento: 5px 0; Largura: 383px; } .collapse_buttons a {margin-left: 15px; Float: Certo; } .show_all_message {background: url (imagens/alt-down-arrow.gif) sem repetir o centro direito; Right-right: 12px; } .show_recent_only {display: Nenhum; Antecedentes: URL (imagens/alt-up-arrow.gif) sem repetição do centro direito; Right-right: 12px; } .collpase_all_message {Background: url (imagens/colapso-ll.gif) sem repetir o centro direito; Right-right: 12px; Cor: #666666;}Adicione código ao HTML da seguinte forma:
<ar> <li> <p> <cite> zhang san: </cite> <pan> 1 minuto atrás </span> </p> <div> <p> hello <r/> <r /> esta é a última mensagem </p> </npning </li> <li> <p> <cite> li s: </div> </li> <li> <p> <cite> wang wu: </cite> <pan> 1 dia </span> </p> <div> <p> primeira vez </p> </li> <li> <p> <cite> li si: </citing> <pla> <span> </p> </p> </p> <p> <cite> wang wu: </cite> </cite> </cite> </li> <li> <p> <cite> wang wu: </cite> </cite> </cite> </li> <li> <p> <cite> wang: </cite> </cite> <li> Ago </span> </p> <div> <p> Suporte </p> </div> </li> <li> <p> <cite> li si: </cite> <pan> 5 dias atrás </span> </p> <div> <p> olá todos </p> </s> </li> <li> <div> <p>Hello everyone</p> </div> </li> <li> <p><cite>Li Si:</cite> <span>7 days ago</span></p> <div> <p>This is good</p> </div> </li> <li> <p><cite>Wang Wu:</cite> <span> <span>8 days ago</span></p> <div> <p>Good Coloque </p> </div> </li> </ol> <p> <a href = "#"> mostre todas as mensagens (9) </a> <a href = "#"> mostre apenas cinco mensagens </a> <a href = "#"> colapso todas as mensagens </a> </p> <r/>
Download do caso