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 相关文章推荐
TopList标签和JavaScript结合两例
Aug 12 Javascript
js判断ie版本号的简单实现代码
Mar 05 Javascript
屏蔽相应键盘按钮操作
Mar 10 Javascript
Python脚本后台运行的几种方式
Mar 09 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
简单掌握JavaScript中const声明常量与变量的用法
May 21 Javascript
vuex 实现getter值赋值给vue组件里的data示例
Nov 05 Javascript
分享JS表单验证源码(带错误提示及密码等级)
Jan 05 Javascript
webpack的 rquire.context用法实现工程自动化的方法
Feb 07 Javascript
OpenLayers3实现对地图的基本操作
Sep 28 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 03 Javascript
JS创建或填充任意长度数组的小技巧汇总
Oct 24 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生成随机用户名和密码的实现代码
2013/02/27 PHP
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
浅析php原型模式
2014/11/25 PHP
PHP执行SQL文件并将SQL文件导入到数据库
2015/09/17 PHP
PHP7匿名类用法分析
2016/09/26 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
JS中的phototype详解
2017/02/04 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
小程序server请求微信服务器超时的解决方法
2019/05/21 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
uniapp实现可滑动选项卡
2020/10/21 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
Python中http请求方法库汇总
2016/01/06 Python
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
python爬虫使用cookie登录详解
2017/12/27 Python
获取python的list中含有重复值的index方法
2018/06/27 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
执行Django数据迁移时报 1091错误及解决方法
2019/10/14 Python
Python单例模式的四种创建方式实例解析
2020/03/04 Python
Python count函数使用方法实例解析
2020/03/23 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
Notino匈牙利:购买香水和化妆品
2019/04/12 全球购物
机关工会工作总结2015
2015/05/26 职场文书
浅谈Redis在直播场景的实践方案
2021/04/27 Redis