js 实现的可折叠留言板(附源码下载)


Posted in Javascript onJuly 01, 2014

javaScript 代码如下:

$(document).ready(function(){ 

$(".message_list .message_body:gt(0)").hide(); 

$(".message_list li:gt(4)").hide(); 
$(".message_head").click(function(){ 
$(this).next(".message_body").slideToggle(500) 
return false; 
}); 

//收起所有消息 
$(".collpase_all_message").click(function(){ 
$(".message_body").slideUp(500) 
return false; 
}); 

//显示所有消息 
$(".show_all_message").click(function(){ 
$(this).hide() 
$(".show_recent_only").show() 
$(".message_list li:gt(4)").slideDown() 
return false; 
}); 

//只显示最近的消息 
$(".show_recent_only").click(function(){ 
$(this).hide() 
$(".show_all_message").show() 
$(".message_list li:gt(4)").slideUp() 
return false; 
}); 

});

css部分代码如下:

* { 
margin: 0; 
padding: 0; 
} 
body { 
margin: 10px auto; 
width: 570px; 
font: 75%/120% Arial, Helvetica, sans-serif; 
} 
p { 
padding: 0 0 1em; 
} 
.message_list { 
list-style: none; 
margin: 0; 
padding: 0; 
width: 383px; 
} 
.message_list li { 
padding: 0; 
margin: 0; 
background: url(images/message-bar.gif) no-repeat; 
} 
.message_head { 
padding: 5px 10px; 
cursor: pointer; 
position: relative; 
} 
.message_head .timestamp { 
color: #666666; 
font-size: 95%; 
position: absolute; 
right: 10px; 
top: 5px; 
} 
.message_head cite { 
font-size: 100%; 
font-weight: bold; 
font-style: normal; 
} 
.message_body { 
padding: 5px 10px 15px; 
} 
.collapse_buttons { 
text-align: right; 
border-top: solid 1px #e4e4e4; 
padding: 5px 0; 
width: 383px; 
} 
.collapse_buttons a { 
margin-left: 15px; 
float: right; 
} 
.show_all_message { 
background: url(images/tall-down-arrow.gif) no-repeat right center; 
padding-right: 12px; 
} 
.show_recent_only { 
display: none; 
background: url(images/tall-up-arrow.gif) no-repeat right center; 
padding-right: 12px; 
} 
.collpase_all_message { 
background: url(images/collapse-all.gif) no-repeat right center; 
padding-right: 12px; 
color: #666666;
}

HTML中添加代码如下:

<ol class="message_list"> 
<li> 
<p class="message_head"><cite>张三:</cite> <span class="timestamp">1分钟前</span></p> 
<div class="message_body"> 
<p>你好<br /> 
<br /> 
这是最后一条消息</p> 
</div> 
</li> 
<li> 
<p class="message_head"><cite>李四:</cite> <span class="timestamp">2分钟前</span></p> 
<div class="message_body"> 
<p>你也好</p> 
</div> 
</li> 
<li> 
<p class="message_head"><cite>王五:</cite> <span class="timestamp">1天前</span></p> 
<div class="message_body"> 
<p>第一次来</p> 
</div> 
</li> 
<li> 
<p class="message_head"><cite>李四:</cite> <span class="timestamp">2天前</span></p> 
<div class="message_body"> 
<p>顶</p> 
</div> 
</li> 
<li> 
<p class="message_head"><cite>王五:</cite> <span class="timestamp">3天前</span></p> 
<div class="message_body"> 
<p>支持</p> 
</div> 
</li> 
<li> 
<p class="message_head"><cite>李四:</cite> <span class="timestamp">5天前</span></p> 
<div class="message_body"> 
<p>大家好</p> 
</div> 
</li> 
<li> 
<p class="message_head"><cite>张三:</cite> <span class="timestamp">6 天前</span></p> 
<div class="message_body"> 
<p>大家好</p> 
</div> 
</li> 
<li> 
<p class="message_head"><cite>李四:</cite> <span class="timestamp">7天前</span></p> 
<div class="message_body"> 
<p>这里不错哦</p> 
</div> 
</li> 
<li> 
<p class="message_head"><cite>王五:</cite> <span class="timestamp">8 天前</span></p> 
<div class="message_body"> 
<p>好地方</p> 
</div> 
</li> 
</ol> 
<p class="collapse_buttons"><a href="#" class="show_all_message">显示所有消息(9)</a> <a href="#" class="show_recent_only">只显示五条消息</a> <a href="#" class="collpase_all_message">收起所有消息</a></p> 
<br />
Javascript 相关文章推荐
表单提交时自动复制内容到剪贴板的js代码
Mar 16 Javascript
用javascript来实现动画导航效果的代码
Dec 16 Javascript
js调用flash的效果代码
Apr 26 Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
如何在JS中实现相互转换XML和JSON
Jul 19 Javascript
浅谈FastClick 填坑及源码解析
Mar 02 Javascript
JavaScript根据json生成html表格的示例代码
Oct 24 Javascript
vue-router权限控制(简单方式)
Oct 29 Javascript
小程序实现多列选择器
Feb 15 Javascript
axios异步提交表单数据的几种方法
Aug 11 Javascript
JavaScript利用append添加元素报错的解决方法
Jul 01 #Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 #Javascript
Visual Studio中js调试的方法图解
Jun 30 #Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
Jun 30 #Javascript
js从Cookies里面取值的简单实现
Jun 30 #Javascript
jQuery学习总结之jQuery事件
Jun 30 #Javascript
JavaScript 获取任一float型小数点后两位的小数
Jun 30 #Javascript
You might like
PHP获取MSN好友列表类的实现代码
2013/06/23 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
2015/08/10 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
详解python之协程gevent模块
2018/06/14 Python
python递归全排列实现方法
2018/08/18 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
北京银河万佳Java面试题
2012/03/21 面试题
杭州时比特电子有限公司SQL
2013/08/22 面试题
英语系本科生个人求职信
2013/09/21 职场文书
电子商务应届生自我鉴定
2014/01/13 职场文书
环保建议书300字
2014/05/14 职场文书
建材投资建议书
2014/05/16 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
建议书范文
2015/02/05 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
Python实现socket库网络通信套接字
2021/06/04 Python