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

最终效果：

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

安装深度wine_深度系统更新（2020.11.25）
本次更新部分深度应用,全面优化使用体验,包括磁盘管理器.文件管理器.深度音乐.深度影院.深度相机等.修复部分模块漏洞,提升系统安全性.其他主要更新说明如下: DDE 修复桌面文件重命名第三行内容只展示 ...
JZOJ6893. 【2020.11.25提高组模拟】小 T 与灵石(stone)题解
这道题需要转化,换根和卡常. 首先将集合中的点拉出来,找它们的直径不需要什么虚树,随便挑一个集合里的点为根,做一遍dfs,找最远点x(要在集合里),以x为根重复以上操作,找到最远点y,x-y就是题解 ...
2020.11.25【NOIP提高A组】模拟总结
停课来备战NOIP,人生中的第一次. 题很难,用老师的话来说,但这是磨练心境. 总分:106 T1:太空漫步考试时,一开始打算用字典树,结果发现看错题,就打了一个dfs,想不到如何处理[]嵌套的情况 ...
有关Java的基础知识2020/11/25
一: 提倡使用实例方法也就是提倡使用非静态方法对于静态方法.静态变量.非静态方法和非静态变量同类之间可以直接调用调用规范:类名.静态的东西对象.非静态的(有时需要你new一个对象) 非静态 ...
[2020多校A层11.25]最大K段和（反悔贪心）
[2020多校A层11.25]最大K段和对于一个长度为n的序列,求解不相交的k段使得他们的总和最大,输出最大值. n<=1e5 对于这种问题,我们没有思路求解,可以考虑枚举,发现无法枚举,然后 ...
QIIME 2教程. 25可用和开发中插件AvailableFuturePlugins(2020.11)
文章目录可用插件 alignment对齐:[用于生成和处理序列对齐](https://docs.qiime2.org/2020.11/plugins/available/alignment/) co ...
QIIME 2教程. 01简介和安装 Introduction Install(2020.11开始更新)
写在前面 QIIME是微生物组领域最广泛使用的分析流程,10年来引用20000+次,2019年Nature杂志评为近70年来人体菌群研究的25个里程碑事件--里程碑16:生物信息学工具助力菌群测序数据 ...
QIIME 2教程. 01简介和安装 Introduction Install(2020.11)
文章目录写在前面 QIIME 2的优势 QIIME 2用户文档(版本:2020.11) 视频:QIIME 2用户文档01.1 简介入门指南什么是QIIME 2? 核心概念数据文件: QIIME ...
QIIME 2教程. 04人体微生物组分析Moving Pictures(2020.11)
文章目录 QIIME 2用户文档. 4人体各部位微生物组本节视频视频教程启动QIIME2运行环境样本元数据下载和导入数据拆分样品序列质控和生成特征表方法1. DADA2 方法2. Deb ...

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

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

最新文章

热门文章