jQuery-可收缩面板
2024-06-01 21:20:26
可收缩的面板（像Gmai收件箱面板l）。可以应用在文章、新闻评论列表中。见图效果：
js:
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function () {//hide message_body after the first one$(".message_list .message_body:gt(0)").hide();//hide message li after the 5th$(".message_list li:gt(4)").hide();//toggle message_body$(".message_head").click(function () {$(this).next(".message_body").slideToggle(500)return false;});//collapse all messages$(".collpase_all_message").click(function () {$(".message_body").slideUp(500)return false;});//show all messages$(".show_all_message").click(function () {$(this).hide()$(".show_recent_only").show()$(".message_list li:gt(4)").slideDown()return false;});//show recent messages only$(".show_recent_only").click(function () {$(this).hide()$(".show_all_message").show()$(".message_list li:gt(4)").slideUp()return false;});});</script>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
margin: 10px auto;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
p
{
padding: 0 0 1em;
}
/* message display page */
.message_list
{
list-style: none;
margin: 0;
padding: 0;
width: 383px;
}
.message_list li
{
padding: 0;
margin: 0;
background: url(images/collapsible-panels/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/collapsible-panels/tall-down-arrow.gif) no-repeat right center;
padding-right: 12px;
}
.show_recent_only
{
display: none;
background: url(images/collapsible-panels/tall-up-arrow.gif) no-repeat right center;
padding-right: 12px;
}
.collpase_all_message
{
background: url(images/collapsible-panels/collapse-all.gif) no-repeat right center;
padding-right: 12px;
color: #666666;
}
</style>
|
<body><ol class="message_list"><li><p class="message_head"><cite>someone:</cite> <span class="timestamp">1 minute ago</span></p><div class="message_body"><p>Hello Nick,<br /><br />This is the latest message display. The rest are collapsed by default</p></div></li><li><p class="message_head"><cite>nick:</cite> <span class="timestamp">2 minutes ago</span></p><div class="message_body"><p>message here</p></div></li><li><p class="message_head"><cite>someone:</cite> <span class="timestamp">1 day ago</span></p><div class="message_body"><p>message here</p></div></li><li><p class="message_head"><cite>nick:</cite> <span class="timestamp">2 days ago</span></p><div class="message_body"><p>message here</p></div></li><li><p class="message_head"><cite>someone:</cite> <span class="timestamp">3 days ago</span></p><div class="message_body"><p>message here</p></div></li><li><p class="message_head"><cite>nick:</cite> <span class="timestamp">5 days ago</span></p><div class="message_body"><p>message here</p></div></li><li><p class="message_head"><cite>someone:</cite> <span class="timestamp">6 days ago</span></p><div class="message_body"><p>message here</p></div></li><li><p class="message_head"><cite>nick:</cite> <span class="timestamp">7 days ago</span></p><div class="message_body"><p>message here</p></div></li><li><p class="message_head"><cite>someone:</cite> <span class="timestamp">8 days ago</span></p><div class="message_body"><p>message here</p></div></li></ol><p class="collapse_buttons"><a href="#" class="show_all_message">Show all message (9)</a> <a href="#" class="show_recent_only">Show 5 only</a> <a href="#" class="collpase_all_message">Collapse all</a></p> </body>
作者：望月狼
出处：http://www.cnblogs.com/wangyuelang0526
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利.
http://www.cnblogs.com/wangyuelang0526/archive/2012/06/04/2534745.html
jQuery-可收缩面板相关推荐
- jquery 照片墙抽奖_使用jQuery滑动面板照片墙画廊
jquery 照片墙抽奖 View demo 查看演示Download Source 下载源 Today we will create a stunning full page photo wall ...
- 10个jQuery特效
jQuery已经不是什么新鲜的事儿,记得第一次听说是在catch the digital flow 上.总把它认为是非常难的东西,也就没有认真去了解他了.直到学完CSS的大部分内容,才开始接触这种&q ...
- jQuery实现商品楼层的感觉
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- 26个功能强大的JQuery特效
图片弹出,滚动框,伸缩栏,鼠标拖拽-.Jquery真是太强大了,如此多的插件和开发者,我们总会找到自己想要的效果. 在这里非常感谢tutorialzine , sohtanaka 开发搜集工作.当然还 ...
- JAVA 操作系统已经来到第五个版本了 现陆续放出三个版本 这是第二个版本
1 package System2; 2 3 import javax.swing.*; 4 5 import java.awt.*; 6 import java.awt.event.ActionEv ...
- 2021年编程列入高考_什么是2021年最佳的后端编程语言？
2021年编程列入高考 It has been almost eight months in 2020, and yet the forecasts for 2020 do not seem to e ...
- 使用深度学习Web项目的手写Marathi印地语字母书写和检测
For the sake of convenience and clarity, This article is divided into two parts as follows : 为了方便和清楚 ...
- Python数据可视化 - 使用Python dash搭建交互式地图可视化看板
1.前言 前几年刚接触Dash库的时候,Dash生态还不太成熟,做些简单的web还行,复杂的.系统性还是得用flask或django来实现.随着这两年dash的不断迭代更新,以及dash大佬feffe ...
- 分享118个JS图片代码，总有一款适合您
分享118个JS图片代码,总有一款适合您 118个JS图片代码下载链接:https://pan.baidu.com/s/1Tr5jX-Lr8Ytzx1lV4zr8nA?pwd=ji78 提取码:ji ...
- 好用的侧边栏菜单/面板jQuery插件
我想大家都用过一些APP应用,它们的菜单展示是以侧边栏滑动方式展现,感觉很新鲜,而现在网页设计也是如此,不少网站也效仿这样的方式来设计.使用侧边栏的好处就是可以节约空间,对于一些内容多或者喜欢简约的网 ...
最新文章
- 电力论文：基于牛顿拉尔逊(直角坐标)的电气潮流计算（python实现）
- mysql mysqlnd_利用mysqlnd_ms实现mysql读写分离
- 面向对象JS编程（一）——创建对象
- 【Pytorch神经网络理论篇】 22 自编码神经网络：概述+变分+条件变分自编码神经网络
- vue-router配置介绍和使用方法（二）
- 谷歌上线数据搜索引擎 Dataset Search
- Oozie 3.3.1安装
- idea查找类 方法在哪里被使用
- 克隆PDB数据库操作
- PSV 2000 3.68降级3.60固化教程
- as模拟器配置编译的Android,android studio连接雷电模拟器 【AS 模拟器】
- CodeForces - 1389E E. Calendar Ambiguity(数学)
- 宅男也可变形男-我是如何在11个月零27天减掉80斤的
- java最最基础知识(入门必备)
- matplotlib learning-----案例：对比电影的票房收入（3）
- java计算机毕业设计BS模式快递运输平台2021源码+mysql数据库+系统+lw文档+部署
- Android 禁止键盘弹出 关闭键盘 禁用键盘 禁用输入法 关闭输入法
- PS怎么修改数字如 2011变为2013
- 什么叫取反_彻底搞明白“取反加1”到底是个什么鬼？
- 【QT信号和槽】学了C++不学QT就太亏了