js/jq截取多余文本隐藏,点击显示

html(只要class对就行了)

class="mess-content"

组件

(function($) {
	$.fn.HideMore = function(options) {
		var defaults = {
			length: 12,
			showmore: "更多",
			hidemore: "隐藏",
			replace: "..."
		};
		var options = $.extend(defaults, options);
		var dom = $(this);
		var objhtml = dom.text();
		dom.data('fulltext', objhtml);
		dom.data('options', options);
		if (objhtml.length > options.length) {
			var precontent = objhtml.substring(0, options.length) + options.replace;
			dom.data('precontent', precontent);
			dom.html('<span>' + precontent + '</span>');
			var a = $('<a href="javascript:void(0);" class="morelink">' + options.showmore + '</a>');
			dom.append(a);
			a.on('click', function() {
				var dom_a = $(this);
				var dom_p = dom_a.parent();
				var options = dom_p.data('options');
				if (dom_a.text() == options.showmore) {
					dom_p.find('span').text(dom_p.data('fulltext'));
					dom_a.text(options.hidemore);
				} else {
					dom_p.find('span').text(dom_p.data('precontent'));
					dom_a.text(options.showmore);
				}
			});
		}
		return false;
	};
})(jQuery);

调用

$(".mess-content").each(function(index,dom){
	$(dom).HideMore({
	length:20, 
	showmore:"展开", 
	hidemore:"收缩", 
	replace:"..." 
});
});

 

预计72小时内黑色圈圈内的地区都将有一次较强震感,初步锁定为5级地震,浅源,发生的位置主要是云南东北昭通(余震)、大理西南部和腾冲交界区域、和缅甸交界区域一线(地壳运动所致)云南巧家县和四川宁南县交界区域。”早在4月14日凌晨时分,微博名为“预报中心”的网民就在微博上发布了云南地震预报信息。该微博被网友转发了377次。在大理5.0级地震发生后,“小丛”等知名网友都转发了该微博。“跪了。”知名网友“小丛”在微博上表示。

预计72小时内黑色圈圈内的地区都将有一次较强震感,初步锁定为5级地震,浅源,发生的位置主要是云南东北昭通(余震)、大理西南部和腾冲交界区域、和缅甸交界区域一线(地壳运动所致)云南巧家县和四川宁南县交界区域。”早在4月14日凌晨时分,微博名为“预报中心”的网民就在微博上发布了云南地震预报信息。该微博被网友转发了377次。在大理5.0级地震发生后,“小丛”等知名网友都转发了该微博。“跪了。”知名网友“小丛”在微博上表示。


THE END
分享
二维码
打赏
< <上一篇
下一篇>>