JavaScript 코드는 다음과 같습니다.
$ (document) {function () {$ ( ". atmess_list .message_list. 메시지 $ ( ". collpase_all_message"). click (function () {$ ( ". message_body"). slideup (500) return false;}); li : gt (4) "). slidedown () return false;}); // 가장 최근의 메시지 만 표시됩니다.CSS 코드의 일부는 다음과 같습니다.
* {마진 : 0; 패딩 : 0; } 바디 {마진 : 10px 자동; 너비 : 570px; 글꼴 : 75%/120% arial, helvetica, sans-serif; } p {패딩 : 0 0 1em; } .message_list {List-Style : 없음; 여백 : 0; 패딩 : 0; 너비 : 383px; } .message_list li {패딩 : 0; 여백 : 0; 배경 : URL (images/message-bar.gif) 비 반복; } .message_head {패딩 : 5px 10px; 커서 : 포인터; 위치 : 상대; } .message_head .timestamp {색상 : #666666; 글꼴 크기 : 95%; 위치 : 절대; 오른쪽 : 10px; 상단 : 5px; } .message_head 인용 {font-size : 100%; 글꼴 중량 : 대담한; 글꼴 스타일 : 정상; } .message_body {패딩 : 5px 10px 15px; } .collapse_buttons {Text-Align : 오른쪽; 테두리 탑 : 솔리드 1px #e4e4e4; 패딩 : 5px 0; 너비 : 383px; } .collapse_buttons a {margin-left : 15px; 플로트 : 오른쪽; } .show_all_message {background : url (images/tall-down-rrow.gif) No-Repeat 오른쪽 센터; 패딩-오른쪽 : 12px; } .show_recent_only {display : none; 배경 : URL (images/tall-up-arrow.gif) No-Repeat Right Center; 패딩-오른쪽 : 12px; . 패딩-오른쪽 : 12px; 색상 : #666666;}다음과 같이 html에 코드를 추가하십시오.
<ol> <li> <p> <cite> Zhang San : </cite> <span> 1 분 전 </span> </p> <div> <p> hello <br/> <br/> 이것은 마지막 메시지입니다 </p> </div> </li> <li> <p> <p> <cite> </cite> </p> </p> </div> </li> <li> <p> <cite> Wang Wu : </cite> <span> 1 일 전 </span> </p> <siv> <p> 처음 </p> </li> <li> <p> <cite> li si : </cite> <pan> <div> </p> <p> top </p> </p> <p> <p> <cite> Wang Wu : </cite> </cite> </cite> </li> <li> <p> <cite> Wang Wu : </cite> </cite> </li> <li> <p> <cite> wang wu : </cite> </cite> <li> <cite> <cite> <cite> AGO </span> </p> <liv> <p> 지원 </p> </p> </div> </li> <li> <p> <cite> li si : </cite> <span> 5 일 전 </span> </p> <div> <p> 안녕하세요 </p> </div> </li> <li> <p> <cite> Zhang San : <span> <span> </cite> <div> <p> 모두 안녕하세요 </p> </div> </li> <li> <p> <cite> li si : </cite> <pan> 7 일 전 </span> </p> <div> <p> 이것은 좋은 </p> </div> </li> <li> <p> <cite> Wang wu : </cite> <span> <p> 장소 </p> </div> </li> </li> </ol> <p> <a href = "#"> 모든 메시지 표시 (9) </a> <a href = "#"> 5 개의 메시지 만 표시 </a> <a href = "#"> 모든 메시지 붕괴 </a> </p> <br/>
케이스 다운로드