Le code JavaScript est le suivant:
$ (document) .ready (function () {$ (". Message_list .Message_Body: gt (0)"). hide (); $ (". message_list li: gt (4)"). hide (); $ (". Message_head"). Click (function () {$ (this) .next (". Messages $ (". Collpase_All_Message"). Cliquez sur (fonction () {$ (". Message_Body"). Slideup (500) return false;}); li: gt (4) "). Slidedown () return false;}); // ne montre que les messages les plus récents $ (". show_recent_only "). Cliquez sur (fonction () {$ (this) .hide () $ (". show_all_message "). show () $ (". Message_List li: gt (4) ").Une partie du code de CSS est la suivante:
* {margin: 0; rembourrage: 0; } body {margin: 10px auto; Largeur: 570px; Police: 75% / 120% Arial, Helvetica, Sans-Serif; } p {rembourrage: 0 0 1em; } .Message_List {list-style: Aucun; marge: 0; rembourrage: 0; Largeur: 383px; } .message_list li {padding: 0; marge: 0; Contexte: URL (images / messages-bar.gif) sans répétition; } .Message_head {padding: 5px 10px; curseur: pointeur; Position: relative; } .Message_head .timestamp {Color: # 666666; taille de police: 95%; Position: absolue; À droite: 10px; En haut: 5px; } .Message_head Cite {Font-Size: 100%; Police-poids: Bold; Style de police: normal; } .Message_Body {padding: 5px 10px 15px; } .collapse_buttons {text-align: droit; Border-top: solide 1px # e4e4e4; rembourrage: 5px 0; Largeur: 383px; } .collapse_buttons a {margin-left: 15px; flottant: à droite; } .show_all_message {background: url (images / tall-down-arrow.gif) sans répétition du centre de droite; rembourrage à droite: 12px; } .show_recent_only {affichage: aucun; CONTEXTE: URL (images / tall-up-arrow.gif) sans répétition du centre de droite; rembourrage à droite: 12px; } .CollPase_All_Message {Background: URL (images / effondrement-all.gif) sans répétition du centre de droite; rembourrage à droite: 12px; Couleur: # 666666;}Ajoutez du code à HTML comme suit:
<l> <li> <p> <Cite> Zhang San: </ cite> <span> il y a 1 minute </span> </p> <div> <p> Bonjour <br /> <pr /> Ceci est le dernier message </p> </v> </li> <li> <p> <p> <cite> li SI: </spin> <spanne> il y a 2 minutes </pan> </p> </div> </li> <li> <p> <Cite> Wang Wu: </ cite> <span> il y a 1 jour </span> </p> <div> <p> Première fois </p> </li> <li> <p> <cite> li si: </cite> <span> <span> il y a 2 jours </pan> </p> <v> <p> <p> <cite> wang wu: </ cite> </ cite> </ cite> </li> <li> <p> <cite> wang wu: </cite> </cite> </vite> </li> <li> <p> <cite> wang wu: </ cite> </spande> </cite> </li> <li> <p> il y a </span> </p> <div> <p> support </p> </div> </li> <li> <p> <Cite> li si: </cite> <span> il y a 5 jours </span> </p> <v> <p> Hello tout le monde </p> </div> </li> <li> <p> <cite> Zhang San: </cite> <div> <p> Bonjour à tous </p> </div> </li> <li> <p> <cite> li si: </ cite> <span> il y a 7 jours </span> </p> <v> <p> c'est bon </p> </div> </li> <li> <p> <p> wang wu: </cite> <span> <pander> il y a 8 jours </ spande> </p> good> <span> <pander> il y a 8 jours </ spande> Placer </p> </div> </li> </l> <p> <a href = "#"> Afficher tous les messages (9) </a> <a href = "#"> Afficher seulement cinq messages </a> <a href = "#"> Effondrent tous les messages </a> </p> <br />
Téléchargement de cas