下班了~~~我把今天整理的一个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~~~，本人有个毛病，特别爱写注释，方便以后看~~~~

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

jquery特效（1）—点击展示与隐藏全文的更多相关文章

  1. Web设计师值得收藏的10个jQuery特效

    jQuery已经不是什么新鲜的事儿,以前总把它认为是非常难的东西,也就没有认真去了解他了.直到学完CSS的大部分内容,才开始接触这种"write less, do more" 的J ...

  2. jQuery实现菜单点击隐藏（上下左右）

    canrun <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  3. 基于jQuery 3D旋转明星人物展示特效

    分享一款基于jQuery 3D旋转明星人物展示特效.这是一款来自百度换肤活动的明星旋转展示效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  4. js进阶 12-15 jquery如何实现点击button显示列表，点击其它位置隐藏列表

    js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? ev ...

  5. Jquery手机点击其他地方隐藏控件问题

    因为不太懂mui的底部导航栏的操作,所以自己写了用很普通的方法实现手机底部导航栏,遇到了很多问题.比如:要实现点击底部菜单栏上某一个菜单,显示子菜单,然后点击手机空白处,隐藏菜单. 实现方法是: // ...

  6. jquery特效（5）—轮播图③（鼠标悬浮停止轮播）

    今天很无聊,就接着写轮播图了,需要说明一下,这次的轮播图是在上次随笔中jquery特效(3)—轮播图①(手动点击轮播)和jquery特效(4)—轮播图②(定时自动轮播)的基础上写出来的,也就是本次随笔 ...

  7. jquery特效（4）—轮播图②（定时自动轮播）

    周末出去逛完街,就回公司好好地研究代码了,也算是把定时自动轮播程序写出来了,特意说明一下,这次的轮播图是在昨天随笔中jquery特效(3)—轮播图①(手动点击轮播)的基础上写出来的,也就是本次随笔展示 ...

  8. 一些jquery特效收集

    jQuery幻灯片插件带投影的图片叠加切换幻灯片轮播 特效:http://www.jsfoot.com/jquery/images/ jquery文字滚动上下间歇文字滚动 http://www.17s ...

  9. 图片左右间隔滚动Jquery特效

    图片左右间隔滚动Jquery特效,支持自动播放的开启与关闭,同时支持左右箭头的点击播放,具体处理程序如下 <!DOCTYPE html > <html> <head> ...

随机推荐

  1. java并发之hashmap源码

    在上篇博客中分析了hashmap的用法,详情查看java并发之hashmap 本篇博客重点分析下hashmap的源码(基于JDK1.8) 一.成员变量 HashMap有以下主要的成员变量 /** * ...

  2. [转]IIS7.5优化--提高线程数来适应高并发

    根据压测结果做出的修改历史: 第一步:只针对maxWorkerThreads.maxIoThreads和minWorkerThreads做了修改<processModel autoConfig= ...

  3. JVM 常量池

    最近正好在研究这个问题,题主问题本身是有问题的,在JDK7中HotSpot的常量池是放在Java Heap中,并非题目中的native memory中.在JDK6中是放在Perm Space.题主可以 ...

  4. 左偏树 / 非旋转treap学习笔记

    背景 非旋转treap真的好久没有用过了... 左偏树由于之前学的时候没有写学习笔记, 学得也并不牢固. 所以打算写这么一篇学习笔记, 讲讲左偏树和非旋转treap. 左偏树 定义 左偏树(Lefti ...

  5. Maven的POM简单理解

    以下引用自官方的POM介绍https://maven.apache.org/guides/introduction/introduction-to-the-pom.html: 一.什么是POM? 项目 ...

  6. 黑科技：CSS定制多行省略

    转载请注明出处:http://hai.li/2017/03/08/css-multiline-overflow-ellipsis.html 什么是多行省略? 当字数多到一定程度就显示省略号点点点.最初 ...

  7. go 依赖包管理工具gb安装报错

    尝试了下gb工具,发现有个问题: [root@etcd1 test]# go get github.com/constabulary/gb/... /home/gopath/src/github.co ...

  8. 投资人王刚口述：滴滴如何用八十万成为百亿美金公司？ zz

    作者|李好福布斯杂志中文版采编 阿里巴巴前高管.滴滴打车天使投资人王刚近日在杭州接受了<福布斯>独家专访,讲述了集齐“阿里的人.百度的技术.腾讯的钱”的滴滴如何从八十万启动资金,在三年内成 ...

  9. 基于GPU加速的三维空间分析【转】

    基于GPU加速的三维空间分析 标签:supermap地理信息系统gisit 文:李凯 随着三维GIS 的快速发展和应用普及,三维空间分析技术以其应用中的实用性成为当前GIS技术研究的热点领域.面对日益 ...

  10. maven编译maven-surefire-plugin插件报错

    1.编译错误信息: [INFO] ------------------------------------------------------------------------ [ERROR] Fa ...