源来页 公告 登陆

[收藏]实现长篇文章全文阅读展开和折叠

南墙 @Ta
2020-05-11 13:07

实现长篇文章全文阅读展开和折叠
html代码

<div class="topic-content" data-floorID="0" id="floor_content_0">
		文章内容区
</div>

展开和折叠按钮显示
<div class="floor_fold_bar" id="floor_fold_bar_0"></div>


js代码(需要引入jQuery)
$(document).ready(function(){
    // 自动折叠过长内容
		var maxHeight = 768;
		$(".topic-content,.floor-content").each(function(){
			var that =$(this);
			var id=this.getAttribute("data-floorID");
			if(that.height() >  maxHeight){
				that.height(maxHeight);
				$('#floor_fold_bar_'+id).html("<button data-floorID='"+id+"'>展开隐藏内容</button>");
				$('#floor_fold_bar_'+id+">button").on('click',function(){
					var id=this.getAttribute("data-floorID");
					var that=$("#floor_content_"+id);
					// 不要使用that.height()进行判断,返回值是浮点数,不一定精确相等
					if(this.innerHTML == '折叠超出内容'){
						that.height(maxHeight);
						this.innerHTML='展开超出内容';
					}else{
						that.height(that[0].scrollHeight);
						this.innerHTML='折叠超出内容';
					}
				});
			}
		});
	});

以上代码来自虎绿林开源程序
阅:209 发表于2020-05-11 13:07
#其他教程
评论:

返回源来页/返回首页


天合之作 曲在人意

心灵鸡汤:
      

®2019-2020 all power by Zlproject2.91 首页 #top

天合之作 曲在人意