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 相关文章推荐
javascript 45种缓动效果 非常酷
Jun 28 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
Mar 04 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 Javascript
JQuery中Ajax()的data参数类型实例分析
Dec 15 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
解决vue.js this.$router.push无效的问题
Sep 03 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 Javascript
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
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
php数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
php除数取整示例
2014/04/24 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
详解JavaScript中的表单验证
2015/06/16 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
如何使用three.js 制作一个三维的推箱子游戏
2020/07/29 Javascript
python在linux系统下获取系统内存使用情况的方法
2015/05/11 Python
python实现复制整个目录的方法
2015/05/12 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
Python书单 不将就
2017/07/11 Python
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
对Python的多进程锁的使用方法详解
2019/02/18 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
python接口自动化如何封装获取常量的类
2019/12/24 Python
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
幼儿教师自我鉴定
2013/11/02 职场文书
宠物店的创业计划书范文
2014/01/11 职场文书
企业总经理岗位职责
2014/02/13 职场文书
2014年中秋寄语
2014/08/11 职场文书
房屋租赁合同补充协议
2014/10/11 职场文书
2015毕业生实习工作总结
2014/12/12 职场文书
创业计划书之干洗店
2019/09/10 职场文书
聊一聊python常用的编程模块
2021/05/14 Python