下班了~~~我把今天整理的一个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. [开源] FreeSql.Tools Razor 生成器

    FreeSql 经过半年的开发和坚持维护,在 0.6.x 版本中完成了几大重要事件: 1.按小包拆分,每个数据库实现为单独 dll: 2.实现 .net framework 4.5 支持: 3.同时支 ...

  2. android-samples-mvp

    Model–view–presenter (MVP)介绍 mvp在wiki上的介绍为 Model  定义用户界面所需要被显示的数据模型,一个模型包含着相关的业务逻辑 View  View不应该处理业务 ...

  3. luogu P1103 书本整理

    题目描述 Frank是一个非常喜爱整洁的人.他有一大堆书和一个书架,想要把书放在书架上.书架可以放下所有的书,所以Frank首先将书按高度顺序排列在书架上.但是Frank发现,由于很多书的宽度不同,所 ...

  4. 手机微硬盘读取速度>50MB/s eMMC技术浅析

    转载:http://mobile.zol.com.cn/296/2968659_all.html#p2968659 手机微硬盘读取速度>50MB/s 在开始今天的话题之前,请大家随笔者一起时光倒 ...

  5. 更新tensorflow支持GPU时出错

    sudo pip install --upgrade tensorflow-gpu Operation not permitted: '/tmp/pip-Sx_vMg-uninstall/System ...

  6. iOS集成百度地图方法步骤

    前言:app中的导航功能越来越流行,现在我自己做的项目中也有此需求,做过了后记录下笔记.  由于源代码保密所以这里仅仅提供demo,下面是效果图 一:iOS地图SDK 1.打开 百度地图api链接 i ...

  7. jquery_ajax 入门实例

    序:本文通过几个小样例,简单介绍怎样使用jqueryAjax异步载入. 1. $(selector).load(url,[data],[callback]) :加载远程HTML文件代码并插入DOM中. ...

  8. vue2.0 + vux （二）Footer组件

    1.Footer组件 Footer.vue <!-- 底部 footer --> <template> <div> <tabbar> <!-- 综 ...

  9. Kick the ball!（dfs）湖南省赛第十届

    Problem K: Kick the ball! Time Limit: 1 Sec  Memory Limit: 128 MB  Special Judge Submit: 109  Solved ...

  10. Android相关工具下载(ADT、NDK等等)

    一个非常牛掰的网站,可以下载很多Android相关的工具等 网址为: http://www.androiddevtools.cn/