前端

文章内容过长自动隐藏至指定高度并弹出展开按钮

时间：2020-02-14 19:45:08 来源：chqqws.com 作者：陈清泉

简介：通过判断指定div高度来触发事件，当div达不到指定高度时则无反应。当div超过指定高度时则隐藏超出部分并弹出展开按钮，点击按钮则显示被隐藏部分，再次点击则隐藏该部分。常用于内容页长篇文章等

未超过指定高度

超过指定高度

点击展开按钮后

HTML：
<div>
测试DEOM测试DEOM测试DEOM测试DEOM测试DEOM测试DEOM测试DEOM测测试DEOM测试DEOM测试DEOM测试DEOM测试DEOM测试DEOM测试DEOM测测试DEOM测试DEOM测试DEOM测试DEOM测试DEOM测试DEOM测试DEOM测测试DEOM测试DEOM测试DEOM测试DEOM测试DEOM测试DEOM测试DEOM测测试DEOM测试DEOM测试DEOM测试DEOM测试DEOM测试DEOM测试DEOM测测试DEOM测试DEOM测试DEOM测试DEOM测试DEOM测试DEOM测试DEOM测测试DEOM测试DEOM测试DEOM测试DEOM测试DEOM测试DEOM测试DEOM
</div>
<input type="button" value="展开"/>

CSS：
<style type="text/css">
div{width:300px;word-break:break-all;background-color:#eeeeee;padding:30px;color:#777;}
.h_fix{height:150px;overflow:hidden;}
</style>

JS（需引入jQuery文件）：
<script type="text/javascript">
if($('div').height()<=150){ //当div高度小于或等于150（此值根据需要和.h_fix中的height属性一同更改）时，按钮隐藏，否则按钮显示并给div添加.h_fix中的效果
   $('input').css('display','none');
} else {
   $('div').addClass("h_fix");
   $('input').css('display','block');
}
$('input').toggle(function(){ //当点击按钮时按钮显示“收起”，并将div的.h_fix效果移除
   $('div').removeClass("h_fix");
   $('input').val('收起');},
function(){ //再次点击按钮时按钮显示“显示”，并给div添加.h_fix中的效果
   $('div').addClass("h_fix");
   $('input').val('展开');
});
</script>