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

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

效果图：


1、html代码截图：

html代码复制区：

<div class="sur-car show-hide" id="sh1">
                                    <div class="sh-content" style="overflow:hidden;">
                                        <span>介绍</span>
                                        <p>
                                            项目开发商是XXXXXXXX房地产。。。。Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                            Accusantium
                                        </p>
                                    </div>
                                    <a class="sh" href="" data-no-cache="true">
                                        <i class="icon icon-down"></i>
                                        <span class="sh-btn">展开</span>
                                    </a>
                                </div>
                                <div class="sur-car" id="sh2">
                                    <div class="sh-content" style="overflow:hidden;">
                                        <span>详情</span>
                                        <p>开盘时间：2013-04-10</p>
                                        <p>入住时间：2017-05-30</p>
                                        <p>建筑类型：板塔结合</p>
                                        <p>物业类型：</p>
                                        <p>装修程度：</p>
                                        <p>占地面积：</p>
                                        <p>建筑面积：</p>
                                        <p>总户数：</p>
                                        <p>容积率：</p>
                                        <p>绿化率：</p>
                                        <p>停车位：</p>
                                        <p>物管费：</p>
                                        <p>产权年限：</p>
                                        <p>开发商：</p>
                                    </div>
                                    <a class="sh" href="" data-no-cache="true">
                                        <i class="icon icon-down"></i>
                                        <span class="sh-btn">展开</span>
                                    </a>
                                </div>

2、js代码截图：

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');
            }
        });