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

	南墙 @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='折叠超出内容';
					}
				});
			}
		});
	});

阅:1714

发表于2020-05-11 13:07

#其他教程