可收缩的面板（像Gmai收件箱面板l）。可以应用在文章、新闻评论列表中。见图效果：
js:
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//hide message_body after the first one
$(".message_list .message_body:gt(0)").hide();
//hide message li after the 5th
$(".message_list li:gt(4)").hide();
//toggle message_body
$(".message_head").click(function () {
$(this).next(".message_body").slideToggle(500)
return false;
});
//collapse all messages
$(".collpase_all_message").click(function () {
$(".message_body").slideUp(500)
return false;
});
//show all messages
$(".show_all_message").click(function () {
$(this).hide()
$(".show_recent_only").show()
$(".message_list li:gt(4)").slideDown()
return false;
});
//show recent messages only
$(".show_recent_only").click(function () {
$(this).hide()
$(".show_all_message").show()
$(".message_list li:gt(4)").slideUp()
return false;
});
});
</script>
|
|
<body>
<ol class="message_list">
<li>
<p class="message_head">
<cite>someone:</cite> <span class="timestamp">1 minute ago</span></p>
<div class="message_body">
<p>
Hello Nick,<br />
<br />
This is the latest message display. The rest are collapsed by default</p>
</div>
</li>
<li>
<p class="message_head">
<cite>nick:</cite> <span class="timestamp">2 minutes ago</span></p>
<div class="message_body">
<p>
message here</p>
</div>
</li>
<li>
<p class="message_head">
<cite>someone:</cite> <span class="timestamp">1 day ago</span></p>
<div class="message_body">
<p>
message here</p>
</div>
</li>
<li>
<p class="message_head">
<cite>nick:</cite> <span class="timestamp">2 days ago</span></p>
<div class="message_body">
<p>
message here</p>
</div>
</li>
<li>
<p class="message_head">
<cite>someone:</cite> <span class="timestamp">3 days ago</span></p>
<div class="message_body">
<p>
message here</p>
</div>
</li>
<li>
<p class="message_head">
<cite>nick:</cite> <span class="timestamp">5 days ago</span></p>
<div class="message_body">
<p>
message here</p>
</div>
</li>
<li>
<p class="message_head">
<cite>someone:</cite> <span class="timestamp">6 days ago</span></p>
<div class="message_body">
<p>
message here</p>
</div>
</li>
<li>
<p class="message_head">
<cite>nick:</cite> <span class="timestamp">7 days ago</span></p>
<div class="message_body">
<p>
message here</p>
</div>
</li>
<li>
<p class="message_head">
<cite>someone:</cite> <span class="timestamp">8 days ago</span></p>
<div class="message_body">
<p>
message here</p>
</div>
</li>
</ol>
<p class="collapse_buttons">
<a href="#" class="show_all_message">Show all message (9)</a> <a href="#" class="show_recent_only">
Show 5 only</a> <a href="#" class="collpase_all_message">Collapse all</a></p>
</body>
作者：望月狼
出处：http://www.cnblogs.com/wangyuelang0526
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利.
http://www.cnblogs.com/wangyuelang0526/archive/2012/06/04/2534745.html