JavaScriptコードは次のとおりです。
$（document）.ready（function（）{$（ "。message_list.message_body：gt（0）"）。hid（ "。message_list li：gt（4））。hid（）; $（"。message_head "）。メッセージ$（ "。collpase_all_message"） li：gt（4） "）CSSのコードの一部は次のとおりです。
* {マージン：0;パディング：0; } body {マージン：10px auto;幅：570px;フォント：75％/120％Arial、Helvetica、Sans-Serif; } p {パディング：0 0 1EM; } .message_list {list-style：none;マージン：0;パディング：0;幅：383px; } .message_list li {padding：0;マージン：0;背景：url（images/message-bar.gif）No-Reepeat; } .message_head {padding：5px 10px;カーソル：ポインター;位置：相対; } .message_head .timestamp {color：＃666666;フォントサイズ：95％;位置：絶対;右：10px;トップ：5px; } .message_head cite {font-size：100％; font-weight：bold;フォントスタイル：通常。 } .message_body {padding：5px 10px 15px; } .collapse_buttons {text-align：right;ボーダートップ：ソリッド1px＃e4e4e4;パディング：5px 0;幅：383px; } .collapse_buttons a {margin-left：15px;フロート：そうです; } .show_all_message {background：url（images/tall-down-arrow.gif）No-Repeat Right Center;パディング右：12px; } .show_recent_only {display：none;背景：url（images/tall-up-arrow.gif）繰り返し右センター。パディング右：12px; } .collpase_all_message {background：url（images/collapse-all.gif）繰り返し右センター;パディング右：12px;色：＃666666;}次のようにHTMLにコードを追加します。
<ol> <li> <p> <cite> zhang san：</cite> <span> 1分前</span> </p> <div> <p> hello <br/> <br/>これは最後のメッセージです</p> </div> </li> <li> <p> <cite> li si：</cite> </div> </li> <li> <p> <cite> wang wu：</cite> <span> 1日前</span> </p> <div> <p>初めて</p> </li> <li> <p> <cite> <p> <cite> wang wu：</cite> </cite> </cite> </li> <li> <p> <cite> wang wu：</cite> </cite> </cite> </li> <li>前</span> </p> <div> <p>サポート</p> </div> </li> <li> <p> <p> <p> <cite> li si：</cite> <span> 5日前</span> </p> <div> <p>みんな<div> <p>みんな</p> </div> </li> <li> <p> <cite> li si：</cite> <span> 7日前</span> </p> <div> <p>これは良い</p> </div> </li> <li> <p> <p> <cite> wan場所</p> </div> </li> </ol> <p> <a href = "＃">すべてのメッセージを表示（9）</a> <a href = "＃"> 5つのメッセージのみを表示</a> <a href = "＃">すべてのメッセージを崩壊します</a> </p> <br/>
ケースダウンロード