El código JavaScript es el siguiente:
$ (documento) .Ready (function () {$ (". Message_list .message_body: gt (0)"). hide (); $ (". Message_list li: gt (4)"). hide (); $ (". Message_head"). Click (function () {$ (this) .Next (". Message_Body"). Mensajes $ (". Collpase_all_message"). Click (function () {$ (". Message_body"). SlideUp (500) return False;}); li: gt (4) "). slideown () return false;}); // show solo los mensajes más recientes $ (". show_recent_only "). click (function () {$ (this) .hide () $ (". show_all_message "). show () $ (". Message_list li: gt (4) ").Parte del Código de CSS es la siguiente:
* {margen: 0; relleno: 0; } cuerpo {margen: 10px automático; Ancho: 570px; Fuente: 75%/120% Arial, Helvetica, Sans-Serif; } P {relleno: 0 0 1em; } .message_list {list-style: none; margen: 0; relleno: 0; Ancho: 383px; } .message_list li {Padding: 0; margen: 0; Antecedentes: URL (Images/Message-Bar.gif) No-Repeat; } .message_head {relleno: 5px 10px; cursor: puntero; Posición: relativo; } .message_head .timestamp {color: #666666; tamaño de fuente: 95%; Posición: Absoluto; Derecha: 10px; Arriba: 5px; } .message_head cite {font-size: 100%; Font-Weight: Bold; estilo de fuente: normal; } .message_body {Padding: 5px 10px 15px; } .collapse_buttons {text-align: right; Top de borde: sólido 1px #E4E4E4; relleno: 5px 0; Ancho: 383px; } .collapse_buttons a {margen-izquierda: 15px; flotante: correcto; } .show_all_message {fondo: url (imágenes/tall down-arrow.gif) sin repetir centro derecho; Right de relleno: 12px; } .show_recent_only {display: none; Antecedentes: URL (Images/Tall-Up-Arrow.gif) Centro derecho sin repetición; Right de relleno: 12px; } .collpase_all_message {fondos: url (imágenes/colapso-all.gif) sin repetir centro derecho; Right de relleno: 12px; Color: #666666;}Agregar código a HTML de la siguiente manera:
<ol> <li> <p> <cite> zhang san: </cite> <span> hace 1 minuto </span> </p> <div> <p> hola <Br/> <Br /> este es el último mensaje </p> </div> </li> <li> <p> <cite> li si: </cite> <span> 2 minutos </span> </p> <viv> <div> <div> </div> </li> <li> <p> <cite> wang wu: </cite> <span> hace 1 día </span> </p> <div> <p> primera vez </p> </li> <li> <p> <cite> li si: </cite> <span> <span> hace 2 días </span> </p> <iv> </p> </p> </li li. <p> <cite> wang wu: </cite> </cite> </cite> </li> <li> <p> <cite> wang wu: </cite> </cite> </cite> </li> <li> <p> <cite> wang wu: </cite> </cite> </cite> </li> <p> <p> <p> Hace </span> </p> <div> <p> Soport </p> </div> </li> <li> <p> <cite> li si: </cite> <span> hace 5 días </span> </p> <div> <p> hola a todos </p> </li> </li> <li> <p> <cite> zhang san: </cite> <span> 6 días> 6 días> </span> 6 días </span> </span> 6 días </span> </span> 6 días </span> </span> 6 días </span> </span> 6 días </pan> <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 lugar </p> </div> </li> </ol> <p> <a href = "#"> Mostrar todos los mensajes (9) </a> <a href = "#"> Mostrar solo cinco mensajes </a> <a href = "#"> colapsar todos los mensajes </a> </p> <r />
Descarga de casos