综合 ·

WordPress主题中加入展开全文功能

一篇文章太长,能否隐藏部分内容,然后点击"显示全部内容",才显示所有内容

效果如图所示,看看这个效果吧。

掐指一算,这篇文章应该也是有此效果。
就是超过一定长度就隐藏,显示 “点击展开全文” 按钮,效果很简单,也很复杂。

//文章内容显隐
function unfold() {
	var doc = document;
	var wrap = doc.querySelector(".content_wrap_A");
	var unfoldField = doc.querySelector(".unfold-field");
	$('.content_wrap_A').css("visibility", "visible");
	unfoldField.onclick = function () {
		this.parentNode.removeChild(this);
		wrap.style.maxHeight = "100%";
	}
	document.onreadystatechange = function () { //当内容中有图片时,立即获取无法获取到实际高度,需要用 onreadystatechange                 
		if (document.readyState === "complete") {
			var wrapH = doc.querySelector(".content_wrap_A").offsetHeight;
			var contentH = doc.querySelector(".A_content").offsetHeight;
			if (contentH <= wrapH) { // 如果实际高度大于我们设置的默认高度就把超出的部分隐藏。                     
				unfoldField.style.display = "none";
			}
		}
	}
}
unfold();
.content_wrap_A {
	max-height: 20rem;
	overflow: hidden;
	position: relative;
	visibility: hidden;
}
.unfold-field {
	position: absolute;
	font-size: 0;
	bottom: 0;
	width: 100%;
	height: 124px;
	z-index: 3;
}
.unfold-field .unflod-field_mask {
	height: 78px;
	width: 100%;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, hsla(0, 0%, 100%, 0)), to(#fff));
	background-image: linear-gradient(-180deg, hsla(0, 0%, 100%, 0), #fff);
}
.unfold-field_text {
	cursor: pointer;
	width: 100%;
	color: #406599;
	height: 46px;
	font-size: 0px;
	line-height: 46px;
	text-align: center;
	background: #fff;
}
/*.unfold-field_text span {
	display: inline-block;
	font-size: 16px;
	height: 46px;
	line-height: 46px;
}*/
.unfold-field_text span::after {
	content: "";
	vertical-align: middle;
	background: url(https://c1.adline.com.cn/static/img/bottom.png);
	background-size: contain;
	background-repeat: no-repeat;
	width: 9px;
	height: 6px;
	display: inline-block;
	margin-left: 5px;
}


						
content; apply_filters('the_content', 'content'); // 一些插件(如crayon-syntax-highlighter)将非内容性的钩子(wp_enqueue_script等)挂载在the_content上, 缓存命中时将失效 ?>

LEAVE A REPLY