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 相关文章推荐
onclick与listeners的执行先后问题详细解剖
Jan 07 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 Javascript
JavaScript时间转换处理函数
Apr 14 Javascript
浅谈js和css内联外联注意事项
Jun 30 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
微信小程序表单验证错误提示效果
May 19 Javascript
原生JS进行前后端同构
Apr 22 Javascript
js运算符的一些特殊用法
Jul 29 Javascript
vue中关闭eslint的方法分析
Aug 04 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 Javascript
vue学习之Vue-Router用法实例分析
Jan 06 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
SONY ICF-SW7600的电路分析
2021/03/02 无线电
PHP Memcached应用实现代码
2010/02/08 PHP
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
PHP页面实现定时跳转的方法
2014/10/31 PHP
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
实现placeholder效果的方案汇总
2015/06/11 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
2016/05/03 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
关于webpack2和模块打包的新手指南(小结)
2017/08/07 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
Python实现的数据结构与算法之链表详解
2015/04/22 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
如何基于Python实现数字类型转换
2020/02/07 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
美国宠物商店:Wag.com
2016/10/25 全球购物
丝绸和人造花卉、植物和树木:Nearly Natural
2018/11/28 全球购物
销售代表求职自荐信
2013/10/01 职场文书
《少年王冕》教学反思
2014/04/11 职场文书
推广普通话标语
2014/06/27 职场文书
刑事上诉状范文
2015/05/22 职场文书
世界名著读书笔记
2015/06/25 职场文书
MySQL数据库之存储过程 procedure
2022/06/16 MySQL