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

以高度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');
            }
        });
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值