jquery特效 点击展示与隐藏全文


Posted in Javascript onDecember 09, 2015

本文实例讲述了jquery点击展示与隐藏全文特效,这里使用jquery实现展开、隐藏特效,点击查看全文后内容展开,点击收起全文其内容收缩,分享给大家供大家参考。具体如下:

运行效果截图如下:

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();       //将简略说明的文字显示出来
  });
});

希望本文所述对大家学习jquery程序设计有所帮助。

Javascript 相关文章推荐
jquery控制listbox中项的移动并排序的实现代码
Sep 28 Javascript
jQuery1.6 正式版发布并提供下载
May 05 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
Vue数据绑定简析小结
May 07 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
Aug 09 Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 01 Javascript
详解Vue的七种传值方式
Feb 08 Vue.js
AngularJS实现表单手动验证和表单自动验证
Dec 09 #Javascript
js实现微信分享代码
Oct 11 #Javascript
JavaScript观察者模式(经典)
Dec 09 #Javascript
常用的Javascript设计模式小结
Dec 09 #Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 #Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 #Javascript
详解JavaScript基本类型和引用类型
Dec 09 #Javascript
You might like
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
php常见的魔术方法详解
2014/12/25 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
如何在vue 中引入使用jquery
2020/11/10 jQuery
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
对于Python装饰器使用的一些建议
2015/06/03 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
python操作excel文件并输出txt文件的实例
2018/07/10 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
python中如何实现将数据分成训练集与测试集的方法
2019/09/13 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
python之语音识别speech模块
2020/09/09 Python
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
html5页面结构_动力节点Java学院整理
2017/07/10 HTML / CSS
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
个人素质的自我评价分享
2013/12/16 职场文书
保险专业自荐信范文
2014/02/20 职场文书
高中军训感言600字
2014/03/11 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
评职称个人总结
2015/03/05 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
民事代理词范文
2015/05/25 职场文书
热血教师观后感
2015/06/10 职场文书