时间:2021-07-01 10:21:17 帮助过:4人阅读
话不多说,请看具体实例
自己引用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> <p 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行超 过显示下箭头</p> <p 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行超 过显示下箭头</p> <p 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行超 过显示下箭头</p> </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中文网!
相关推荐:
javascript原生封装淡入淡出效果的函数测试
基于Jquery easyui 选中特定的tab
以上就是基于jQuery实现的查看全文的功能的详细内容,更多请关注Gxl网其它相关文章!