js 实现的可折叠留言板(附源码下载)
javaScript代码如下：
$(document).ready(function(){
$(".message_list.message_body:gt(0)").hide();
$(".message_listli:gt(4)").hide();
$(".message_head").click(function(){
$(this).next(".message_body").slideToggle(500)
returnfalse;
});
//收起所有消息
$(".collpase_all_message").click(function(){
$(".message_body").slideUp(500)
returnfalse;
});
//显示所有消息
$(".show_all_message").click(function(){
$(this).hide()
$(".show_recent_only").show()
$(".message_listli:gt(4)").slideDown()
returnfalse;
});
//只显示最近的消息
$(".show_recent_only").click(function(){
$(this).hide()
$(".show_all_message").show()
$(".message_listli:gt(4)").slideUp()
returnfalse;
});
});
css部分代码如下：
*{
margin:0;
padding:0;
}
body{
margin:10pxauto;
width:570px;
font:75%/120%Arial,Helvetica,sans-serif;
}
p{
padding:001em;
}
.message_list{
list-style:none;
margin:0;
padding:0;
width:383px;
}
.message_listli{
padding:0;
margin:0;
background:url(images/message-bar.gif)no-repeat;
}
.message_head{
padding:5px10px;
cursor:pointer;
position:relative;
}
.message_head.timestamp{
color:#666666;
font-size:95%;
position:absolute;
right:10px;
top:5px;
}
.message_headcite{
font-size:100%;
font-weight:bold;
font-style:normal;
}
.message_body{
padding:5px10px15px;
}
.collapse_buttons{
text-align:right;
border-top:solid1px#e4e4e4;
padding:5px0;
width:383px;
}
.collapse_buttonsa{
margin-left:15px;
float:right;
}
.show_all_message{
background:url(images/tall-down-arrow.gif)no-repeatrightcenter;
padding-right:12px;
}
.show_recent_only{
display:none;
background:url(images/tall-up-arrow.gif)no-repeatrightcenter;
padding-right:12px;
}
.collpase_all_message{
background:url(images/collapse-all.gif)no-repeatrightcenter;
padding-right:12px;
color:#666666;
}
HTML中添加代码如下：
<olclass="message_list"> <li> <pclass="message_head"><cite>张三:</cite><spanclass="timestamp">1分钟前</span></p> <divclass="message_body"> <p>你好<br/> <br/> 这是最后一条消息</p> </div> </li> <li> <pclass="message_head"><cite>李四:</cite><spanclass="timestamp">2分钟前</span></p> <divclass="message_body"> <p>你也好</p> </div> </li> <li> <pclass="message_head"><cite>王五:</cite><spanclass="timestamp">1天前</span></p> <divclass="message_body"> <p>第一次来</p> </div> </li> <li> <pclass="message_head"><cite>李四:</cite><spanclass="timestamp">2天前</span></p> <divclass="message_body"> <p>顶</p> </div> </li> <li> <pclass="message_head"><cite>王五:</cite><spanclass="timestamp">3天前</span></p> <divclass="message_body"> <p>支持</p> </div> </li> <li> <pclass="message_head"><cite>李四:</cite><spanclass="timestamp">5天前</span></p> <divclass="message_body"> <p>大家好</p> </div> </li> <li> <pclass="message_head"><cite>张三:</cite><spanclass="timestamp">6天前</span></p> <divclass="message_body"> <p>大家好</p> </div> </li> <li> <pclass="message_head"><cite>李四:</cite><spanclass="timestamp">7天前</span></p> <divclass="message_body"> <p>这里不错哦</p> </div> </li> <li> <pclass="message_head"><cite>王五:</cite><spanclass="timestamp">8天前</span></p> <divclass="message_body"> <p>好地方</p> </div> </li> </ol> <pclass="collapse_buttons"><ahref="#"class="show_all_message">显示所有消息(9)</a><ahref="#"class="show_recent_only">只显示五条消息</a><ahref="#"class="collpase_all_message">收起所有消息</a></p> <br/>
案例下载