下班了~~~我把今天整理的一个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. ASP.NET Core 中间件基本用法

    ASP.NET Core 中间件 ASP.NET Core的处理流程是一个管道,而中间件是装配到管道中的用于处理请求和响应的组件.中间件按照装配的先后顺序执行,并决定是否进入下一个组件.中间件管道的处 ...

  2. Codeforces 401D Roman and Numbers

    题目大意 Description 给定一个数 N(N<1018) , 求有多少个经过 N 重组的数是 M(M≤100) 的倍数. 注意: ①重组不能有前导零; ②重组的数相同, 则只能算一个数. ...

  3. 开源BT磁力搜索引擎收集

    基本是利用bt网络中p2p技术实现,开源项目上实现了dht网络的搜索.是学习dht算法的好项目. https://lanmaowz.com/open-dht-spider/ https://githu ...

  4. DTrace Oracle Database

    http://d.hatena.ne.jp/yohei-a/20100515/1273954199 DTrace で Oracle Database のサーバー・プロセスをトレースしてみた Oracl ...

  5. Windows 无法卸载IE9怎么办

    1 如下图所示,使用自带的卸载工具无法卸载IE9 运行命令提示符,粘贴下面的命令 FORFILES /P %WINDIR%\servicing\Packages /M Microsoft-Window ...

  6. 百科知识 DMG文件如何打开

    1 DMG格式是在MAC系统上的一个镜象文件,也可以说是压缩文件,如果你是使用苹果机或在PC上装了MAC OS X for X86,在MAC系统上双击这个文件就可以解开了:现在在Windows平台,我 ...

  7. HashSet中存方用户自己定义数据类型数据，重写equals方法和hashCode方法

    import java.util.Set; import java.util.HashSet; public class SetTest { public static void main(Strin ...

  8. Python3 与 C# 面向对象之～继承与多态 Python3 与 C# 面向对象之～封装 Python3 与 NetCore 基础语法对比（Function专栏） [C#]C#时间日期操作 [C#]C#中字符串的操作 [ASP.NET]NTKO插件使用常见问题 我对C#的认知。

    Python3 与 C# 面向对象之-继承与多态   文章汇总:https://www.cnblogs.com/dotnetcrazy/p/9160514.html 目录: 2.继承 ¶ 2.1.单继 ...

  9. 关于ASP.NET MVC中Response.Redirect和RedirectToAction的BUG (跳转后继续执行后面代码而不结束进程)以及处理方法

    关于ASP.NET MVC中Response.Redirect和RedirectToAction的BUG (跳转后继续执行后面代码而不结束进程)以及处理方法   在传统的ASP.NET中,使用Resp ...

  10. 算法排序-lowB三人组

    冒泡排序思路: 选择排序思路: 插入排序思路: 小结: 详细代码解释看下一篇