js控制超出制定高度部分隐藏点击按钮展开全部

网页内容折叠与展开效果

原创于 2012-06-14 10:16:57 发布 · 2.5k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了一种使用JavaScript实现的网页内容折叠与展开效果。通过设置div的高度并结合按钮控制，可以实现在限定高度内隐藏多余内容并在点击按钮后显示全部内容的功能。此方法简单实用，适用于各种需要控制文本显示长度的场景。

首先设置内容的高度，并制定超出高度部分隐藏

<div id='refer_a' style='height:80px;overflow:hidden'>内容<br />
</div>
<a href='#' onclick='slideDiv(\"refer_a\",80);return false;' class='afblue'>更多 >></a>

单击更多展开全部内容，再次单击隐藏

function slideDiv(divID,height){
	var obj=document.getElementById(divID).style;
	if(obj.height==""){
		obj.height=height+"px";
		obj.overflow="hidden"; 
	}else{
		obj.height="";
		obj.overflow="";
	}
}