2020-11-25 多行文本或段落的折叠与展开

从网上找了相关资料，效果大都不太满意，就着手改了些，为以后使用范例，特此记录：

html部分：

.weui-media-box__desc {
    font-weight: normal;
    font-size: 12px;
    line-height: 1.5;
    margin-top: .6em;
    height: 36px;
    display: -webkit-box;
    color: #949494;
}
.weui-media-box__desc {
    color: #999999;
    font-size: 13px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.morecon {
    float: right;
    font-weight: bold;
    text-shadow: -1px 1px 4px;
    color: #2d2d2d9e;
    font-size: 1.2em;
}

<p class="weui-media-box__desc">
正月十六走太平是传统民俗文化，在大文豪吴敬梓的故乡安徽省全椒县，有一亘古至今的第一大民俗习惯：每年正月十六这天，城内万人空巷， 四乡八邻、扶老携幼、倾家出动、 从清晨到深夜，数十万人到太平桥上走一走………
				人流如潮、摩肩接踵、甚为壮观，放烟花、燃爆竹、烧香烛、以此祈祷风调雨顺、逢凶化吉、消灾去病、平平安安，寄托了当地劳动人民一种祛邪、避灾、祈福的美好愿望。

</p>

js部分：

/**
*@description 文字的展开与折叠
*/
$(document).ready( function() {
        $(".weui-media-box__desc").each(function(){
            height=$(this).height();
            if(height>20) {//这里的值可根据实际需要定义
                $(this).css("height","36");//这里的值可根据实际需要定义
                $(this).after("<a class=\"morecon\" >展开</a>");
            }
        });
        $(".morecon").click(function(){
          
			zhankai($(this));
			
        });
    });
	
	function zhankai(obj){
		$(obj).parent().children("p").css("height","auto");
		$(obj).parent().children("p").css("display","block");
		$(obj).html('折叠');
		$(obj).unbind();
		$(obj).click(function(){
			 zhedie($(obj))
		 });
	}
	function zhedie(obj){
		 $(obj).parent().children("p").css("height","36");
		 $(obj).parent().children("p").css("display","-webkit-box");
		 $(obj).html('展开');
		 $(obj).unbind();
		 $(obj).click(function(){
		 	zhankai($(obj));
		  });
	}

 最终效果：