基于jQuery实现的查看全文功能【实用】
话不多说,请看具体实例
自己引用jQuery.js版本
查看全文---收起(文本内容少于四行,不显示查看全文---收起,超过五行时才显示出来并有此功能)
<!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="js/jquery1.7.2.min.js"></script> <title>查看更多---收起:细数逝去的过往</title> <style> .z_content_right_two { width: 978px; border: 1px solid #fff; padding: 10px; font-size: 14px; color: #666666; margin: 20px auto; text-indent: 30px; line-height: 22px; text-align: justify; background: #fff; } .ckgd { color: #00b1bb; text-decoration: none; display: inline-block; margin-left: -27px; text-decoration: underline; } .ckgd:hover { color: #00b1bb; text-decoration: none; } .shouqi { text-align: right; padding: 5px 20px; } .z_zixunhuifu { width: 8px; height: 8px; border: 1px solid red; background: red; -moz-border-radius: 50%; -o-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; margin-left: 122px; margin-top: -28px; } .z_xian { color: #ddd; } </style> </head> <body> <div class="z_content_right_two z_box_z">咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行 咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行咨询内容放这里,最多显示5行,超 过显示下查看箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行超 过显示下箭头咨询内容放这里,最多显示5行咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行 咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行咨询内容放这里,最多显示5行,超 过显示下查看箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行超 过显示下箭头咨询内容放这里,最多显示5行咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行 咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行咨询内容放这里,最多显示5行,超 过显示下查看箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行超 过显示下箭头</div> <div class="z_content_right_two z_box_z">咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行 咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行咨询内容放这里,最多显示5行,超 过显示下查看箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行超 过显示下箭头咨询内容放这里,最多显示5行咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行 咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行咨询内容放这里,最多显示5行,超 过显示下查看箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行超 过显示下箭头咨询内容放这里,最多显示5行咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行 咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行咨询内容放这里,最多显示5行,超 过显示下查看箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行超 过显示下箭头</div> <div class="z_content_right_two z_box_z">咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行 咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行咨询内容放这里,最多显示5行,超 过显示下查看箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行超 过显示下箭头咨询内容放这里,最多显示5行咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行 咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行咨询内容放这里,最多显示5行,超 过显示下查看箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行超 过显示下箭头咨询内容放这里,最多显示5行咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行 咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行咨询内容放这里,最多显示5行,超 过显示下查看箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行,超过显示下箭头咨询内容放这里,最多显示5行超 过显示下箭头</div> </body> <script> $(function() { var max = 330, display = "...显示全部"; $(".z_content_right_two").on("click", ".ckgd", function() { var me = this, show = $(me).text() == display, attr = show ? "his" : "sub", name = show ? "收起" : display; $(this).parent().each(function() { $(this).html($(this).attr(attr)).append($(me).clone(true).text(name)); }); }); $(".z_box_z").each(function() { var me = this, html = $(me).html(), text = getElementText(me), length = text.length, sub = text.substr(0, max); $(me).attr({ his: text, sub: sub }); if(length > max) { $(me).html(sub); $(me).append( $("<a href='javascript:void(0)' class='ckgd'>".concat(display, "</a>")) ); } }); }); function getElementText(e) { var t = ""; //如果传入的是元素,则继续遍历其子元素 //否则假定它是一个数组 e = e.childNodes || e; //遍历所有子节点 for(var j = 0; j < e.length; j++) { //如果不是元素,追加其文本值 //否则,递归遍历所有元素的子节点 t += e[j].nodeType != 1 ? e[j].nodeValue : text(e[j].childNodes); } //返回区配的文本 return t; } </script> </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持PHP中文网!
更多基于jQuery实现的查看全文功能【实用】相关文章请关注PHP中文网!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

JavaScript字符串替换方法详解及常见问题解答 本文将探讨两种在JavaScript中替换字符串字符的方法:在JavaScript代码内部替换和在网页HTML内部替换。 在JavaScript代码内部替换字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项,需使用正则表达式并添加全局标志g: str = str.replace(/fi

本教程向您展示了如何将自定义的Google搜索API集成到您的博客或网站中,提供了比标准WordPress主题搜索功能更精致的搜索体验。 令人惊讶的是简单!您将能够将搜索限制为Y

本文系列在2017年中期进行了最新信息和新示例。 在此JSON示例中,我们将研究如何使用JSON格式将简单值存储在文件中。 使用键值对符号,我们可以存储任何类型的

因此,在这里,您准备好了解所有称为Ajax的东西。但是,到底是什么? AJAX一词是指用于创建动态,交互式Web内容的一系列宽松的技术。 Ajax一词,最初由Jesse J创造

增强您的代码演示:开发人员的10个语法荧光笔 在您的网站或博客上共享代码片段是开发人员的常见实践。 选择合适的语法荧光笔可以显着提高可读性和视觉吸引力。 t

利用轻松的网页布局:8个基本插件 jQuery大大简化了网页布局。 本文重点介绍了简化该过程的八个功能强大的JQuery插件,对于手动网站创建特别有用

核心要点 JavaScript 中的 this 通常指代“拥有”该方法的对象,但具体取决于函数的调用方式。 没有当前对象时,this 指代全局对象。在 Web 浏览器中,它由 window 表示。 调用函数时,this 保持全局对象;但调用对象构造函数或其任何方法时,this 指代对象的实例。 可以使用 call()、apply() 和 bind() 等方法更改 this 的上下文。这些方法使用给定的 this 值和参数调用函数。 JavaScript 是一门优秀的编程语言。几年前,这句话可

本文介绍了关于JavaScript和JQuery模型视图控制器(MVC)框架的10多个教程的精选选择,非常适合在新的一年中提高您的网络开发技能。 这些教程涵盖了来自Foundatio的一系列主题
