Kode JavaScript adalah sebagai berikut:
$ (dokumen) .ready (function () {$ (". Message_list .message_body: gt (0)"). hide (); $ (". Message_list li: gt (4)"). Hide (); $ (". MESSESS_HEAD"). Klik (function () {$ (ini) .next (". Pesan $ (". Collpase_all_message"). Klik (fungsi () {$ (". Message_Body"). Slideup (500) Return false;}); Li: gt (4) "). Slidedown () Return false;}); // Tampilkan hanya pesan terbaru $ (". show_recent_only "). klik (function () {$ (this) .hide () $ (".Bagian dari Kode CSS adalah sebagai berikut:
* {margin: 0; Padding: 0; } body {margin: 10px auto; Lebar: 570px; Font: 75%/120% Arial, Helvetica, Sans-Serif; } p {padding: 0 0 1em; } .message_list {List-style: none; Margin: 0; Padding: 0; Lebar: 383px; } .message_list li {padding: 0; Margin: 0; Latar Belakang: URL (gambar/pesan-bar.gif) No-Repeat; } .message_head {padding: 5px 10px; kursor: pointer; Posisi: kerabat; } .message_head .Timestamp {Color: #666666; Ukuran font: 95%; Posisi: Absolute; Kanan: 10px; Atas: 5px; } .message_head mengutip {font-size: 100%; font-weight: tebal; Font-style: Normal; } .message_body {padding: 5px 10px 15px; } .collapse_buttons {text-align: benar; Border-Top: Solid 1px #E4E4E4; Padding: 5px 0; Lebar: 383px; } .collapse_buttons a {margin-left: 15px; float: benar; } .show_all_message {background: url (gambar/tinggi-down-arrow.gif) no-repeat right center; Padding-Right: 12px; } .show_recent_only {display: none; Latar Belakang: URL (Gambar/Tall-Up-Arrow.gif) No-Repeat Right Center; Padding-Right: 12px; } .collpase_all_message {background: url (gambar/collapse-all.gif) no-repeat right center; Padding-Right: 12px; Warna: #666666;}Tambahkan kode ke HTML sebagai berikut:
<Ol> <li> <p> <cite> zhang san: </cite> <span> 1 menit yang lalu </span> </p> <v> <p> halo <bR /> <br /> Ini adalah pesan terakhir </p> </div> </li> <p> <cite> Li Si: </cite> </li> </p> <p> <cite> Li si: </cite> </pond 2 menit </p> <p> <cite> Li si: </cite> </pond 2 menit </p> <p> <cite> Li si: </cite> </pond 2 menit </p> <p> <cite> Li si: </cite> </pond 2 menit </p> <p> <cite> Li si: </cite> </pond 2 menit </p> <cite> </div> </li> <li> <p> <cite> wang wu: </cite> <span> 1 hari yang lalu </span> </p> <ver> <p> pertama kali </p> </li> <li> <pite> </piT> </cite> <span> <span> 2 hari yang lalu </span> </po> </cite> <span> <span> 2 hari yang lalu <pan> </po/p * </cite> <span> <span> 2 hari yang lalu </span> </p> <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> <li> <p><cite> <span>3 days ago</span></p> <div> <p>Support</p> </div> </li> <li> <p><cite>Li Si:</cite> <span>5 days ago</span></p> <div> <p>Hello everyone</p> </div> </li> <li> <p><cite>Zhang San:</cite> <span> <span>6 days ago</span></p> <v> <p> halo semua orang </p> </div> </li> <li> <p> <cite> li si: </cite> <span> 7 hari yang lalu </span> </p> <dv> <p> Ini bagus </p> </pond </li> <li> <p> <cite> wang wu: </cite> </pange> <li> <pan> <cite> Place </p> </div> </li> </l> <p> <a href = "#"> Tampilkan semua pesan (9) </a> <a href = "#"> Tampilkan hanya lima pesan </a> <a href = "#"> Runtuh semua pesan </a> </p> <br/>
Unduh kasus