下班了~~~我把今天整理的一个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. [原创][Verilog]个人.v文件书写规范

    1> 文件名命名,小些单词为主且从命名中可以大致读出其功能,例如:fpga_power.v,can_ctrl.v等命名. 2> 顶层top文件的输入输出IO信号使用大些表示,且加上”i/o ...

  2. Flex 布局教程学习

    转载自:阮一峰的网络日志(http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html) 网页布局(layout)是 CSS 的一个重点应用. 布局 ...

  3. 如何设置tomcat服务器编码为utf-8编码

    原文:http://blog.csdn.net/u014079773/article/details/52637057 在实际开发中我们经常遇到request请求的中文乱码,那么如何解决中文乱码问题? ...

  4. [反汇编练习] 160个CrackMe之029

    [反汇编练习] 160个CrackMe之029. 本系列文章的目的是从一个没有任何经验的新手的角度(其实就是我自己),一步步尝试将160个CrackMe全部破解,如果可以,通过任何方式写出一个类似于注 ...

  5. 转: Android开发的网络抓包

    方法就是在android机器上面安装tcpdump,然后通过-w参数把抓包记录到本地,再把抓到的.cap文件导到pc上面用wireshark来分析.这里步骤非常多,在和后台联调的时候,这个效率是非常低 ...

  6. Linux 主机被入侵后的处理案例

    Linux主机被入侵后的处理案例 提交 我的留言 加载中 已留言 一次Linux被入侵后的分析 下面通过一个案例介绍下当一个服务器被rootkit入侵后的处理思路和处理过程,rootkit攻击是Lin ...

  7. HDU 5289 Assignment(单调队列)

    题意:给T足数据,然后每组一个n和k,表示n个数,k表示最大同意的能力差,接下来n个数表示n个人的能力,求能力差在k之内的区间有几个 分析:维护一个区间的最大值和最小值,使得他们的差小于k,于是採用单 ...

  8. 百科知识 STEP文件如何打开

    使用任何的主流三维设计软件Pro/E.UG.CATIA.Solidworks等等都可以直接打开. STEP文件是通用格式,但是在打开的时候不同软件会生成不同的文件,下面是Solidworks打开的效果 ...

  9. php.ini的载入位置

    php.ini文件找不到,载入WINDOS下的,但找不到,后来强制-c查找是OK的.思考,为什么载入window下的ini文件.1.可能是有一个默认路径.2.可能没有路径.默认载入. 问题解决:htt ...

  10. 微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo

    微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo 前言 做好了项目之后,在各种浏览器里面測试,都没有问题.非常高兴,交付后端使用.然而发如今微信自带浏览器里面,却是出现 ...