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/>
ケースダウンロード