jquery文本折叠
/** * Created by dongdong on 2015/4/28. */ (function($){ var defaults = { height:40, //文本收起后的高度 speed:‘normal‘, //文本收起和展开的速度 down:{"class":"fold-down","text":"展开"}, //展开的样式 up:{"class":"fold-up","text":"收起"} //收起的样式 }; $.fn.accordionText = function(options){ options = $.extend(defaults,options); return this.each(function(){ var c = $(this), h = c.height(), ph = parseInt(c.css("padding-top").replace("px",""))+parseInt(c.css("padding-bottom").replace("px","")), t = $("#"+$(this).data(‘switch‘)); c.css({overflow:"hidden",height:options.height + ph + "px"}); t.toggle( function(){ $(this).text(options.up.text) .removeClass(options.down.class) .addClass(options.up.class); c.animate({height:h+ph + "px"},options.speed); }, function(){ $(this).text(options.down.text) .removeClass(options.up.class) .addClass(options.down.class); c.animate({height:options.height+ph + "px"},options.speed); } ).text(options.down.text).addClass(options.down.class); }); } })(jQuery);
调用(这里使用了bootstrap的图标样式):
$(function(){ $(".text").accordionText({ down:{"class":"glyphicon glyphicon-chevron-down","text":""}, up:{"class":"glyphicon glyphicon-chevron-up","text":""} }); });
html:
<style type="text/css"> .switch{text-align: center; cursor:pointer;height: 20px; line-height: 20px;} .text{ padding: 3px;} </style> <div> <div class="text bg-success" data-switch="btn2"> 苏打绿开飞机上来看地方就是领导看见菲利克斯减肥路口交水电费路口就是路口附苏打绿开 飞机上来看地方就是领导看见菲利克斯减肥路口交水电费路口就是路口附苏打绿开飞机上来 看地方就是领导看见菲利克斯减肥路口交水电费路口就是路口附苏打绿开飞机上来看地方就 是领导看见菲利克斯减肥路口交水电费路口就是路口附近是考虑到解放路快睡觉打疯了快圣 诞节路口四季度菲利克斯江东父老可接受的李开复就是的离开飞机失联都快放假顺路快递减 肥索拉卡点击法律考试大姐夫流口水的减肥两款手机打发两款手机费路口睡觉的弗兰克交水 电费路口就是的离开飞机上来看点击 </div> <div class="switch"><span id="btn2"></span></div> </div>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。