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 相关文章推荐
JsEasy简介 JsEasy是什么?与下载
Mar 07 Javascript
Javascript 中介者模式实例
Dec 16 Javascript
javascript 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 Javascript
Javascript排序算法之计数排序的实例
Apr 05 Javascript
javascript单引号和双引号的区别和处理
May 14 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
javascript下使用Promise封装FileReader
Feb 19 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
javascript操作cookie
Jan 17 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
Vue的百度地图插件尝试使用
Sep 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
PHP Squid中可缓存的动态网页设计
2008/09/17 PHP
php发送post请求的三种方法
2014/02/11 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
PHP+MySql+jQuery实现的&quot;顶&quot;和&quot;踩&quot;投票功能
2016/05/21 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
python 将对象设置为可迭代的两种实现方法
2019/01/21 Python
python统计字符的个数代码实例
2020/02/07 Python
python数据库编程 ODBC方式实现通讯录
2020/03/27 Python
零基础小白多久能学会python
2020/06/22 Python
深入了解Python enumerate和zip
2020/07/16 Python
法国娇韵诗官方旗舰店:Clarins是来自法国的天然护肤品牌
2018/06/30 全球购物
Lucene推荐的分页方式是什么?
2015/12/07 面试题
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
工程售后服务方案
2014/06/08 职场文书
大学生就业求职信
2014/06/12 职场文书
驾驶员安全责任书
2014/07/22 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
钱学森观后感
2015/06/04 职场文书
2016年记者节感言
2015/12/08 职场文书
详解Python中下划线的5种含义
2021/07/15 Python
javascript的setTimeout()使用方法总结
2021/11/20 Javascript
python绘制云雨图raincloud plot
2022/08/05 Python