如果一段文字长度超过了一定值则出现展开收起功能;如果不超过该值,则正常全部显示

以高度106px为例,文字总高度超过了106px则出现“展开”字样,点击展开后显示全部文字,字样变成“收起”;如果不超过该值,则正常全部显示。

效果图:
如果一段文字长度超过了一定值则出现展开收起功能;如果不超过该值,则正常全部显示_第1张图片
如果一段文字长度超过了一定值则出现展开收起功能;如果不超过该值,则正常全部显示_第2张图片
1、html代码截图:
如果一段文字长度超过了一定值则出现展开收起功能;如果不超过该值,则正常全部显示_第3张图片
html代码复制区:

介绍

项目开发商是XXXXXXXX房地产。。。。Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium

展开
详情

开盘时间:2013-04-10

入住时间:2017-05-30

建筑类型:板塔结合

物业类型:

装修程度:

占地面积:

建筑面积:

总户数:

容积率:

绿化率:

停车位:

物管费:

产权年限:

开发商:

展开

2、js代码截图:
如果一段文字长度超过了一定值则出现展开收起功能;如果不超过该值,则正常全部显示_第4张图片
js代码复制区:

//展开收起功能
        //遍历每个.sh-content,如果高度小于106则隐藏“展开/收起”;否则设置高度为106px。
        $('.sh-content').each(function(){
            if($(this).height()<=106){
                $(this).next('.sh').hide();
                $(this).parent().css('padding-bottom','.5rem');
            }else{
                $(this).css("height","106px");
            }
        });
        //点击“展开”,高度设为自动,文字、图标也跟着改变
        $('.sh').click(function () {
            var htm = $(this).find('.sh-btn').html();
            if (htm == "展开") {
                $(this).find('.sh-btn').html('收起');
                $(this).find('i').removeClass('icon-down').addClass('icon-up');
                $(this).prev('.sh-content').css('height', 'auto');
            } else {
                $(this).find('.sh-btn').html('展开');
                $(this).find('i').removeClass('icon-up').addClass('icon-down');
                $(this).prev('.sh-content').css('height', '106px');
            }
        });

你可能感兴趣的:(如果一段文字长度超过了一定值则出现展开收起功能;如果不超过该值,则正常全部显示)