• Tags
  •         
  • 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来定位文章的元素。

     
    转载请保留页面地址:https://www.breakyizhan.com/js/5323.html