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身份证验证超强脚本
Oct 26 Javascript
Javascript 同时提交多个Web表单的方法
Feb 19 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
Javascript核心读书有感之语言核心
Feb 01 Javascript
javascript强制点击广告的方法
Feb 06 Javascript
jQuery关键词说明插件cluetip使用指南
Apr 21 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
JavaScript中数组常见操作技巧
Sep 01 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
Apr 11 Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 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的开合式多级菜单程序
2006/10/09 PHP
PHP页面间参数传递的四种方法详解
2013/06/09 PHP
php获取系统变量方法小结
2015/05/29 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
2016/09/04 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python基础教程之面向对象的一些概念
2014/08/29 Python
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
python使用socket向客户端发送数据的方法
2015/04/29 Python
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
python:接口间数据传递与调用方法
2018/12/17 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
加拿大时尚少女服装品牌:Garage
2016/10/10 全球购物
英国女性时尚品牌:Apricot
2018/12/04 全球购物
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
linux面试相关问题
2012/08/11 面试题
给领导的检讨书
2014/02/16 职场文书
向领导表决心的话
2014/03/11 职场文书
公司合作协议范文
2014/10/01 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
安全教育的主题班会
2015/08/13 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书