jquery 点击显示更多

点击显示更多

html

<div class="servicepicture banxin">
 
                <div class="imgcontent">
                    <div class="img">
                        <img src="/uploads/image/20190411/d5ec13bdf0fcb9eaa8cf265d94fe6035.png" />
                    </div>
                    <div class="topic">在施工结束后公司将定期回访甲方装置的运行情况，反应器的温差情况，提供后续服务支持（包括催化剂撇头，部分更换等），确保甲方装置运行良好。公司配备24小时值守响应机制，随时随刻为客户解决因催化剂造成的突发问题。</div>
                    <div class="check">查看更多</div>
                </div>
 
                <div class="imgcontent">
                    <div class="img">
                        <img src="/uploads/image/20190411/0aaf7bd140beefad5316ffb07ede779c.png" />
                    </div>
                    <div class="topic">在施工结束后公司将定期回访甲方装置的运行情况，反应器的温差情况，提供后续服务支持（包括催化剂撇头，部分更换等），确保甲方装置运行良好。公司配备24小时值守响应机制，随时随刻为客户解决因催化剂造成的突发问题。</div>
                    <div class="check">查看更多</div>
                </div>
 
                <div class="imgcontent">
                    <div class="img">
                        <img src="/uploads/image/20190411/d5ec13bdf0fcb9eaa8cf265d94fe6035.png" />
                    </div>
                    <div class="topic">在施工结束后公司将定期回访甲方装置的运行情况，反应器的温差情况，提供后续服务支持（包括催化剂撇头，部分更换等），确保甲方装置运行良好。公司配备24小时值守响应机制，随时随刻为客户解决因催化剂造成的突发问题。</div>
                    <div class="check">查看更多</div>
</div>
</div>

css

.servicepicture {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    overflow: hidden;
    margin-top: 40px;
}
.banxin{
width:1200px;
margin:0 auto;
}
.imgcontent {
    width: 375px;
    margin: 10px 12.5px;
}
.imgcontent .img {
    width: 375px;
    height: 280px;
    margin: 0 auto;
    overflow: hidden;
}
.imgcontent .img img {
    width: 375px;
    height: 280px;
}
.imgcontent .topic {
    width: 375px;
    margin: 0 auto;
    font-size: 14px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.check {
    width: 100px;
    height: 40px;
    margin: 0 auto;
    background: #A9010A;
    color: #FFFFFF;
    text-align: center;
    line-height: 40px;
    border-radius: 5px;
    margin-top: 30px;
}

var arr = [];
        var show = true;
        function subTxt() {
            $('.servicepicture .imgcontent .topic').each(function(index) {
                var len = $(this).text().length;
 
                var that = $(this);
                var oldTxt = $(this).text();
                arr.push(oldTxt);
                var txt = $(this).text().substr(0, 30) + '...';
 
                $(this).text(txt)
 
            })
 
        }
        subTxt();
        $(".servicepicture .imgcontent .check").each(function(index) {
 
            $(this).click(function() {
                console.log(index);
                if(!show){
                    subTxt();
                    show = !show;
                }else{
                    $('.servicepicture .imgcontent .topic').eq(index).text(arr[index]);
                    show = !show;
                }
            })
 
        })