文本内容过多,需要做一个折叠展开的效果

 

目标效果图:

文本内容过多,需要做一个折叠展开的效果_第1张图片

1.html

要不是几个月前参加马自达CX-4的周年庆典,我都意识不到马自达CX-4已经上市一年了, 也不知道这款车在时隔一年之后成为了一汽马自达的中流砥柱。想想真是时光荏苒岁月如梭, 就在一年前,我们还在为马自达‘‘好让人担心没米下锅”以及“总是叫好不叫座”担心,一年后就峰回路转了。 马自达只用一年就步入正轨完成品牌重塑,多少有些让人惊人要不是几个月前参加马自达CX-4的周年庆典,我都意识不到马自达CX-4已经上市一年了, 也不知道这款车在时隔一年之后成为了一汽马自达的中流砥柱。想想真是时光荏苒岁月如梭, 就在一年前,我们还在为马自达‘‘好让人担心没米下锅”以及“总是叫好不叫座”担心,一年后就峰回路转了。 马自达只用一年就步入正轨完成品牌重塑,多少有些让人惊人

2.js

 $('.item-content .text').each(function () {
            var height = $(this).height();
            if(height>100){
                $(this).css('height',"100px");
                $(this).after("展开");
            }
        });
        $('.more').click(function () {
            var height = $(this).parent().children('.text').height();
            console.log(height);
            if(height>100){
                $(this).html("展开");
                $(this).parent().children('.text').css("height","100px");
            }else {
                $(this).html("折叠");
                $(this).parent().children('.text').css("height", "auto");
            }
        });
        

3.效果图

文本内容过多,需要做一个折叠展开的效果_第2张图片

4.缺点

  1. 展开按钮不能在文本结束的地方放置
  2. 文本超过规定高度时候,添加。。。会换行。

你可能感兴趣的:(前端小技巧)