JavaScript文本收缩展开 showdetail

最新推荐文章于 2025-02-20 00:00:00 发布

weixin_30706691

最新推荐文章于 2025-02-20 00:00:00 发布

阅读量953

点赞数

CC 4.0 BY-SA版权

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/handboy/p/7158381.html

本文介绍了一种网页中长文本内容的展示与折叠效果实现方法。通过JavaScript动态调整元素的高度，并使用链接来控制显示完整内容，实现了良好的用户体验。此方法适用于各种需要节省页面空间的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文发布时间为：2009-11-15 —— 来源于本人的百度文章 [由搬家工具导入]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
<div id="divS" style="border:1px solid #f0f0f0;background-color:#ccc;padding:4px;margin:10px">
测试文本
测试了
测试侧试试了
测试文本
测试了
测试侧试试了
测试
测试文本
测试了
测试侧试试了
测试文本
测试了
测试侧试试了
</div>

<script type="text/javascript"><!--
doShrink(document.getElementById('divS'),60);
function doShrink(oshrink,maxHeight){
 if(oshrink){
 var oH = (oshrink.clientHeight||oshrink.offsetHeight);
 if(oH>maxHeight){
 var linka = document.createElement("a");
 var div = document.createElement("div");
 div.innerHTML = "…… "
 text = document.createTextNode("[点击查看更多内容]");
 linka.href = "javascript:void(0)";
 linka.onclick = function(e) { shrinkShow(this); }
 linka.appendChild(text);
 div.appendChild(linka);
 var onext = oshrink.nextSibling;
 if(onext)
 oshrink.parentNode.insertBefore(div,onext);
 else
 oshrink.parentNode.appendChild(div);
 //过滤较长的内容
 oshrink.srcHeight = oH;
 oshrink.style.cssText ="overflow-y: hidden; max-height: "+maxHeight+"px; *_height: "+maxHeight+"px; ";
 }
 }
}

function remove(o){
if(o && o.parentNode)o.parentNode.removeChild(o);
}

/* 第一种，具有展开效果 */
var shrinkInterval = false;
function shrinkShow(obj) {
 var omore = obj.parentNode;
 var ohide = omore.previousSibling;
 shrinkInterval = window.setInterval(function(){shrinkStep(ohide);},20);
remove(omore); //去除更多链接
}

function shrinkStep(ohide){
 var targetHeight = ohide.srcHeight;
 var nowHeight = (ohide.clientHeight||ohide.offsetHeight);;
 if(nowHeight < targetHeight){
 ohide.style.height = nowHeight+20 + 'px';
 ohide.style.maxHeight = nowHeight+20 + 'px';
 }else{
 if(shrinkInterval){
 window.clearInterval(shrinkInterval);
 shrinkInterval = false;
 }
 }
}

/* 第二种，没有展开效果 */

/*
function shrinkShow(obj) {
    var omore = obj.parentNode;
    var ohide = omore.previousSibling;
    ohide.style.height = ohide.srcHeight + 'px';
    ohide.style.maxHeight = ohide.srcHeight + 'px';
remove(omore); //去除更多链接
}
*/

// --></script>

</body>
</html>

转载于:https://www.cnblogs.com/handboy/p/7158381.html