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跨域和ajax 跨域问题的实现思路
Sep 05 Javascript
jQuery 使用手册(五)
Sep 23 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
Jan 15 Javascript
Jquery如何实现点击时高亮显示代码
Jan 22 Javascript
zepto.js中tap事件阻止冒泡的实现方法
Feb 12 Javascript
jquery实现翻动fadeIn显示的方法
Mar 05 Javascript
Javascript实现字数统计
Jul 03 Javascript
谈谈target=_new和_blank的不同之处
Oct 25 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 Javascript
原生JS发送异步数据请求
Jun 08 Javascript
jquery实现的放大镜效果示例
Feb 24 jQuery
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
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中利用post传递字符串重定向的实现代码
2011/04/21 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
Python做文本按行去重的实现方法
2016/10/19 Python
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
Python正确重载运算符的方法示例详解
2017/08/27 Python
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
什么是Smart Navigation?
2016/07/03 面试题
轻化专业学生实习自我鉴定
2013/09/20 职场文书
医学类导师推荐信范文
2013/11/19 职场文书
班级活动策划书
2014/02/06 职场文书
土木工程师职业规划范文
2014/03/07 职场文书
花木兰观后感
2015/06/10 职场文书
考研经验交流会策划书
2015/11/02 职场文书
关于做家务的心得体会
2016/01/23 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle
新手入门Mysql--概念
2021/06/18 MySQL
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技
html5调用摄像头截图功能
2022/01/18 Javascript
python中filter,map,reduce的作用
2022/06/10 Python
Go语言编译原理之变量捕获
2022/08/05 Golang