JavaScript对较长文本的折叠

作者: Arvin Chen 分类: js 来源: Break易站(www.breakyizhan.com)

对于文章,或者评论的内容,如果太长的话,可以用下面的代码进行折叠;

(function () {
	var showMoreNChildren = function ($children, n) {
		//显示某jquery元素下的前n个隐藏的子元素
		var $hiddenChildren = $children.filter(":hidden");
		var cnt = $hiddenChildren.length;
		for ( var i = 0; i < n && i < cnt ; i++) {
			$hiddenChildren.eq(i).slideDown();
		}
		return cnt-n;//返回还剩余的隐藏子元素的数量
	}

	//对页中现有的class=showMorehandle的元素,在之后添加显示更多条,并绑定点击行为
	$.showMore = function (selector) {
		if (selector == undefined) { selector = ".showMoreNChildren" } 
		$(selector).each(function () {
			var pagesize = $(this).attr("pagesize") || 10;
			console.log(pagesize);
			$(this).find("li:lt("+pagesize+")").show();
			var $children = $(this).children();
			if ($children.length > pagesize) {
				for (var i = pagesize; i < $children.length; i++) {
					$children.eq(i).hide();
				}
				$("<div class='showMorehandle'>显示更多</div>").insertAfter($(this)).click(function () {
					if (showMoreNChildren($children, pagesize) <= 0) {
						//如果目标元素已经没有隐藏的子元素了,就隐藏“点击更多的按钮条”
						$(this).hide();
					};
				});
			}
		});
	}
})()

保存上面的JS之后,引入上面的JS,然后在对应页面加上下面这点JS即可(记得引入jquery):

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
//调用显示更多插件。参数是标准的 jquery 选择符 
$.showMore(".showMoreNChildren");
</script>

.showMoreNChildren是对html文章页面元素的定位。比如 <div id="divid" class="divclass">,可以用#divid或者.divclass来定位文章的元素。

  •   本文标题:JavaScript对较长文本的折叠 - Break易站
    转载请保留页面地址:https://www.breakyizhan.com/js/5323.html

    发表笔记

    电子邮件地址不会被公开。 必填项已用*标注

    更多阅读