jquery特效点击显示和隐藏全文

本文讲述了一个jquery点击显示和隐藏全文特效的例子。这里，我们使用jquery来实现展开和隐藏特效。点击查看全文后，内容展开，点击折叠全文时，内容缩小，分享给大家参考。具体如下：

运行效果截图如下：

具体代码如下。

首先，看看主框架程序：

！doctype HTML HTML Head metharset=' UTF-8 '/title单击查看全文/title Link Type=' text/CSS' rel='样式表' href=' CSS/layout . CSS '/script Type=' text/JavaScript ' src=' http : js/jquery-1 . 11 . 3 . js '/脚本脚本脚本类型=' text/JavaScript ' src=' http 3360 js/layout . js '/脚本/Head div卡内基公司是培训领域的领导者，在全球85个国家拥有160个分支机构。此外，彼得先生还是几家大公司的董事。作为一个培养他人成功的专业机构的总裁，他是如何成功的？日前，记者在北京东方君悦酒店采访了这位CEO，听他讲述自己是如何成功的。彼得通过一个故事讲述了他对成功的理解。他说当他五岁的时候，他去看医生，因为他病了.a class=' show content ' href=' JavaScript 3360 void(0)；'见全文/a/p div=' content '彼得汉德先生现任戴尔卡内基联合公司总裁兼首席执行官。卡内基公司是培训领域的领导者，在全球85个国家拥有160个分支机构。此外，彼得先生还是几家大公司的董事。作为一个培养他人成功的专业组织的总裁，他是如何成功的？日前，记者在北京东方君悦酒店采访了这位CEO，听他讲述自己是如何成功的。彼得通过一个故事讲述了他对成功的理解。他说他五岁的时候，因为生病去看了医生。当时，疾病让他很不舒服。医生问他你最想要什么。彼得老师对医生说，我想快乐。医生说，你很幸福。结果，他真的很开心。所以，彼得老师说很多人都想追求成功，很多人问他如何尽快获得成功。在他看来，这取决于你对成功的定义。如果你对成功的定义是家庭和睦，那么你应该尝试多和家人沟通，多花点时间在上面，在提高家庭成员和睦的同时，提高自己处理家庭问题的能力。彼得说：“我对成功的定义是幸福。我不会做我不喜欢的事情和工作。中国有句话说得好，‘人要在屋檐下低头。’我不喜欢那种情况，也不会去做。既然我认为幸福就是成功，那我5岁的时候就已经很成功了。" a class=' HideContent ' href=' JavaScript : void(0)；"收起全文/a/div/div/body/HTMl上面的程序布局要注意的是，名为“content”的div中的内容要与省略号“.”前的文字保持一致，也就是重复一段话。

原因：因为省略号“.”前的字当单击“查看全文”按钮时，如果省略号“.”前的单词都没有隐藏，点击“查看全文”按钮后也不会消失，所以文章无法顺利阅读~ ~ ~ ~ ~。

其次，我们来看看风格：

* { padd : 0；margin : 0；}.showAll { width : 60%；margin: 0 auto背景技术# ecebebpadding: 10px}.showAll。title { font-size : 20px；font-weight:粗体；color: # af0015}.showAll。作者{ color: # a1a1a1margin : 12px 0；}.showAll。内容{ display: none//注意这里不显示文字。}以上注意事项是需要隐藏名为“内容”的div，这样点击“查看全文”按钮后即可触发显示事件。Iii .Jquery程序：

$(文档)。ready (function () {$(')。showcontent ')。单击(function () {//$(')。内容')。单击“展开全文”按钮时显示()；//显示未完全显示的部分$(此处)。父项()。hide()；//这里需要注意隐藏简述的文字，因为原文末尾有省略号，不隐藏的后果就是展开后省略号还在})；$ ('.hidecontent ')。单击(function () {//$(this))。父项()。单击“折叠全文”按钮时隐藏()；//隐藏显示的文本$('。showcontent ')。父项()。show()；//显示简要说明的文本})；});希望本文对大家学习jquery编程有所帮助。