jquery特效(1)—点击展示与隐藏全文

下班了~~~我把今天整理的一个jquery小特效发一下,个人觉得比较简单,嗖嗖的就写出来了~~~

下面先来看最终的动态效果:

 

一、来看一下主体框架程序:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>点击查看全文</title><link type="text/css" rel="stylesheet" href="css/layout.css" /><script type="text/javascript" src="js/jquery-1.11.3.js"></script><script type="text/javascript" src="js/layout.js"></script></head><body><div class="showAll"><p class="title">一则励志故事                           </p><p class="author">作者:来自网络 发表时间:2014-3-1</p><p>彼得·韩德先生现任卡内基公司 (Dale Carnegie & Associates) 总裁及首席执行官。卡内基公司为训练界中的翘楚,在全世界85个国家有160个分支机构。 除此之外,彼得先生还是数家大公司的董事,作为一个培训别人怎样获得成功的专业机构的总裁,他是怎样获得成功的呢?日前,记者在北京的东方君悦大酒店采访了这位CEO,听他讲述了自己是怎样获得成功的故事。 彼得先生通过一个故事讲了他对成功的理解。他说他在五岁时因为生病去看医生,当时病痛...<a class="showContent" href="javascript:void(0);">查看全文</a></p><div class="content">彼得·韩德先生现任卡内基公司 (Dale Carnegie & Associates) 总裁及首席执行官。卡内基公司为训练界中的翘楚,在全世界85个国家有160个分支机构。除此之外,彼得先生还是数家大公司的董事,作为一个培训别人怎样获得成功的专业机构的总裁,他是怎样获得成功的呢?日前,记者在北京的东方君悦大酒店采访了这位CEO,听他讲述了自己是怎样获得成功的故事。 彼得先生通过一个故事讲了他对成功的理解。他说他在五岁时因为生病去看医生,当时病痛使他很难受,医生当时问他,你最想要的是什么,彼得先生对医生说,我想要快乐,医生说,那你快乐就是了,结果他真的很快乐。所以彼得先生说,有许多人想追求成功,也有许多人问他,怎样才能尽快地获得成功。他认为,这要先看你对成功的定义是什么?你的成功定义若是家庭和谐,那你就应想办法跟家庭成员更多地沟通,为此付出更多的时间,并在提升家庭成员的和谐之中也提升自己处理家庭问题的能力。  彼得先生说:“我对成功的定义是快乐,我不会做我不喜欢的事和不喜欢的工作。中国的一句俗语说‘人在屋檐下,不得不低头’,我不喜欢那样的境况,我也不会那样做。由于我认为快乐就是成功,所以说,我在5岁时就已经很成功了。” <a class="hideContent" href="javascript:void(0);">收起全文</a></div>      </div>       </body>
</html>

上面程序布局需要注意的是名字为“content”的div里面的内容需要与省略号“. . .”以前的文字保持一致,也就是重复一段文字。

原因是:因为省略号“. . .”以前的文字会在点击“查看全文”按钮的时候隐藏,如果不隐藏省略号“. . .”之前的文字的话,它会在点击“查看全文”按钮后“. . .”不消失,这样文章就不能顺利阅读了~~~~

 

二、下面来看看样式:

*{padding: 0;margin: 0;
}
.showAll{width: 60%;margin: 0 auto;background: #ecebeb;padding: 10px;
}
.showAll .title{font-size: 20px;font-weight: bold;color:#af0015;
}
.showAll .author{color: #a1a1a1;margin: 12px 0;
}
.showAll .content{display: none;      //注意这里让文字不显示
}

上面需要注意的是需要给名字为“content”的div隐藏,这样点击“查看全文”按钮后才可以触发显示事件。

 

三、Jquery程序:

$(document).ready(function(){$(".showContent").click(function(){               //当“展开全文”按钮点击的时候$(".content").show();                          //展示未完全显示的那部分内容$(this).parent().hide();                      //此处需要注意隐藏简略说明的文字,因为原来文字里面最后有省略号,不隐藏的后果就是展开后省略号仍旧在那里});$(".hideContent").click(function(){                  //当“收起全文”按钮点击的时候$(this).parent().hide();                      //隐藏已经显示出来的文字$(".showContent").parent().show();              //将简略说明的文字显示出来});
});

看了上面一段代码我笑了,真是太简单了~~~~觉得贴到博客园让大神看见了一定会嘲笑我O(∩_∩)O~~~,本人有个毛病,特别爱写注释,方便以后看~~~~

不要给我说你看不懂,要不然我都会鄙视你,我把注释写的那么清楚,小白都能看懂~~~~

转载于:https://www.cnblogs.com/lily1010/p/4861782.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/290257.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

.NET Core中使用结果过滤器ResultFilter统一结果返回封装

介绍实现需要继承IResultFilter或者 IAsyncResultFilter。为了方便开发,简化代码,也为了与前端方便对接,需要对接口服务返回结果进行统一处理定义统一返回的结果类我们需要定义一个统一返回结果泛型类ApiResultpublic class ApiResult<T>{public int Code { get; set; }p…

UML 绘图关系

1 继承 子类继承父类2 实现实现类实现接口3 依赖 &#xff08;偶然、临时、比较弱关联&#xff09;类 A 使用了类 B&#xff0c;如果类 B 产生变化将会影响类A4 关联&#xff08;长期的、平等的、双向的、强依赖关系&#xff09;强依赖关系。5 聚合关系&#xff08;关联关系特例…

linux下网口监控软件_超赞的!Aibaba技术官分享高性能Linux服务器解读笔记

一个运行缓慢的应用程序有时会让人抓狂&#xff0c;此时需要在问题诊断的基础上进行性能调整。随着虚拟化、云计算时代的来临&#xff0c;Linux得到迅猛发展&#xff0c;在服务器领域已经占据半壁江山&#xff0c;而基于Linux的运维也面临新的挑战:面对越来越复杂的业务&#x…

Jwt Token 的刷新机制设计

Jwt Token 的刷新机制设计Intro前面的文章我们介绍了如何实现一个简单的 Jwt Server&#xff0c;可以实现一个简单 Jwt 服务&#xff0c;但是使用 Jwt token 会有一个缺点就是 token 一旦颁发就不能够进行作废&#xff0c;所以通常 jwt token 的有效期一般会比较短&#xff0c;…

辨别真假数据科学家必备手册:深度学习45个基础问题(附答案)

简介 早在2009年&#xff0c;深度学习还只是一个新兴领域&#xff0c;只有少数人认为它是一个多产的研究方向。今天&#xff0c;深度学习正在被用来开发那些过去被认为是不可能完成的应用。 语音识别&#xff0c;图像识别&#xff0c;数据中的模式识别&#xff0c;照片中的对象…

redis总结笔记

为什么80%的码农都做不了架构师&#xff1f;>>> 1、Redis的介绍和安装部署 NOSQL 》 Not Only SQL NOSQL以key-value形式存储 特点:非关系型、分布式、开源的、水平可扩展 NOSQL: 数据高并发读写 对海量数据的高效率存储和访问 对数据的搞可扩展性和高可用性 Redi…

go kegg_GO,KEGG富集分析工具——DAVID

DAVID(https://david.ncifcrf.gov/home.jsp)是一个生物信息数据库&#xff0c;整合了生物学数据和分析工具&#xff0c;为大规模的基因或蛋白列表(成百上千个基因ID或者蛋白ID列表)提供系统综合的生物功能注释信息&#xff0c;帮助用户从中提取生物学信息。DAVID目前的工具可以…

更轻易地实现 Jwt Token

更轻易地实现一个 Jwt ServerIntro最近在多个项目中都有用到 Jwt Token 认证&#xff0c;就想着把之前项目里 Jwt Token 的使用封装一下&#xff0c;以便于之后集成起来更加地方便&#xff0c;不用再拷贝代码了JWTJWT 是 JSON Web Token 的缩写&#xff0c;是目前最流行的基于 …

android之实现各个组件点击事件处理

android之实现各个组件点击事件处理&#xff1a;注意&#xff1a;&#xff08;TextView这个组件要点击产生效果的话&#xff0c;要设置&#xff0c;android:clickable"true"这个属性&#xff09;布局&#xff1a;layout/activity_main.xml<LinearLayout xmlns:and…

Android开发最佳实践《IT蓝豹》

Android开发最佳实践 移动开发Android经验分享应用GoogleMaterial Design摘要&#xff1a;前 段时间&#xff0c;Google公布了Android开发最佳实践的一系列课程&#xff0c;涉及到一些平时开发过程中应该保持的良好习惯以及如何使用最新的Android Design Support Library来快速…

.NET MAUI 已在塔架就位 ,4月份发布RC

最美人间三月天&#xff0c;春光不负赶路人。在充满无限希望的明媚春天里&#xff0c;一路风雨兼程的.NET 团队正奋力实现新的突破。根据计划&#xff0c;新一代移动开发平台MAUI 将于4月份 发布RC。目前&#xff0c;MAUI的测试工作和火箭发射前各项准备工作在github 上按计划有…

如何把照片正面变成反面_没有锁边机如何做衣服(五种方法)

这么多年一直没有锁边机&#xff0c;但是也做了很多衣服&#xff0c;今天给大家分享一些我曾经用过的方法。来去缝来去缝适合缝制轻薄面料&#xff0c;如雪纺、真丝、欧根纱等。反反相对&#xff0c;缝份0.5厘米把缝份剪掉0.2厘米翻过来使正面相对&#xff0c;留0.5厘米的缝份车…

linux线程池资料

2019独角兽企业重金招聘Python工程师标准>>> http://www.360doc.com/content/13/0728/13/13308646_303116654.shtml http://blog.csdn.net/turkeyzhou/article/details/8755976 http://blog.csdn.net/zhoubl668/article/details/8927090 http://blog.csdn.net/zypue…

Xamarin效果第二篇之公众号App

前面简单摸索一下Xamarin然后简单做了一个时间轴;这不这几天再次基于Xamarin实现了一下公众号App;我也就是瞎折腾,闲话不多扯,上效果:主Page直接用TabbedPage(类似WPF中的TabControl)然后后台添加内容Page:”互动“页使用CollectionView和模板选择器&#xff1a;"发表&quo…

K8S原来如此简单(一)K8S核心组件与基本原理

k8s视频课程K8S核心组件与工作原理k8s官方文档&#xff1a;https://kubernetes.io/zh/docs/home/前提掌握容器技术&#xff1a;Docker&#xff0c;Containerd等K8S优势使用简单&#xff0c;少量人/小团队可以轻松维护大型分布式系统全面拥抱微服务架构&#xff0c;快速迭代&…

docker supervisor管理进程

Supervisor管理进程Docker容器在启动的时候开启单个进程&#xff0c;比如&#xff0c;一个ssh或者apache的daemon服务。但我们经常需要在一个机器上开启多个服务&#xff0c;这可以有很多方法&#xff0c;最简单的就是把多个启动命名放到一个启动脚本里面&#xff0c;启动的时候…

理解Linux系统中的load average

一、什么是load average&#xff1f;linux系统中的Load对当前CPU工作量的度量 (WikiPedia: the system load is a measure of the amount of work that a computer system is doing)。也有简单的说是进程队列的长度。Load Average 就是一段时间 (1 分钟、5分钟、15分钟) 内平均…

【贯穿】.NET6结合Docker傻瓜式实现容器编排

常规开发部署的痛点一个项目的开发上线有很多纷繁复杂的问题&#xff0c;例如&#xff1a;操作系统运行环境以及各种应用配置、集群环境搭建等等。特别是各种版本的迭代导致的不兼容&#xff0c;这些对于曾经的架构师而言也十分苦恼。而Docker的出现实现了从“蚂蚁搬家”到“乾…

bootstrapt 表格自适应_一起聊B端设计 - 如何设计表格?

一、 数据查看让我们先来回顾一下表格的基本构成&#xff0c;最上面的为表头&#xff0c;横为行&#xff0c;纵为列&#xff0c;内容区每一组展示数据区域为单元格。 表格的设计&#xff0c;虽然看似简单&#xff0c;但是作为用户最常用的组件之一&#xff0c;我们需要对视觉和…

.NET 6 攻略大全(二)

点击上方蓝字关注我们&#xff08;本文阅读时间&#xff1a;15分钟)接上篇内容&#xff0c;本篇文章将介绍&#xff1a;Arm64、容器、支持 OpenTelemetry 指标、Windows Forms 的相关攻略。 Arm64这些天来&#xff0c;对于笔记本电脑、云硬件和其他设备来说&#xff0c;Arm64 令…