下班了~~~我把今天整理的一个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. Linux Perf Probes for Oracle Tracing

    Luca Canali on 21 Jan 2016 Topic: this post is about Linux perf and uprobes for tracing and profilin ...

  2. [转载]中情局数千份机密文档泄露：各种0day工具、恶意程序应有尽有

    转载:http://www.freebuf.com/news/128802.html 维基解密最近再度获取到了数千份文件——据说这些文件是来自CIA(中央情报局),文件细数了CIA所用的网络入侵工具及 ...

  3. SSH 原理和公匙私匙

    先主要介绍了Telnet.SSH 的通信原理,分析了其通信时的工作流程. Telnet 无论Telnet协议连接的是什么类型终端,都会转换为NVT(Net Virtual Terminal)格式进行通 ...

  4. [Bash] Understand and Use Functions in Bash

    n this lesson, we'll go over how bash functions work. Bash functions work like mini bash scripts--yo ...

  5. 从零開始开发Android版2048 （二）获取手势信息

    今天是尝试開始Android版2048小游戏的第二天.在今天,我主要学习了怎样获取用户在屏幕滑动的手势,以及对布局进行了一些小小的完好. 获取用户操作的手势(比方向左滑.向右滑等)主要用到了Gestu ...

  6. odoo 的时差 坑 [updated]

    很多人掉进了odoo的时间坑 odoo约定关于日期的数据,存放在数据库时,以 utc0 时区也就是不带时区存放,应用程序读取日期展示日期时,转换成用户的时区展示.用户的时区通过context传递. o ...

  7. Lead软件项目半年感受

    Lead一个项目快半年了,整体来说是个辛苦活. 除了自己的研发进度,还要负责对上,对下,对外的交流.这里记录一些感受.     对上的交流,除了确保正确理解老大的安排.就是确保老大在和他的lead以及 ...

  8. spl_autoload_register的使用

    class Loader{ static function loadClass($class) { $class = $class.'.php'; if(file_exists($class)) { ...

  9. 封装PDO操作数据库

    <?php class DatabaseHandler { /** * sql语句查询 */ public static function query_data ($dataName,$sql, ...

  10. centos7下MySQL的配置

    1. 下载mysql的repo源 wget http:.noarch.rpm 2. 安装mysql-community-release-el7-5.noarch.rpm包 rpm .noarch.rp ...