本文主要介绍利用CSS实现点击展开阅读全文功能的案例。 有一定的参考价值。 有兴趣的同学可以参考一下。 希望您读完这篇文章后能有所收获。 让小编带你一起去看看吧。 学习关于。
我参考了caibaojian.com/css-tonggle...文章中纯CSS的视图,但是文章中描述的内容适合单篇文章的功效,使用标签生成表格时不太友好数据,所以我将在此基础上进行。 进行了相应的优化阅读css阅读css,具体代码如下:
[id^="contTab"] { display: none; } .content-more { display: none; } [id^="contTab"]:checked ~ #content { max-height: 95px; overflow: hidden; } [id^="contTab"]:checked ~ .content-more { display: block; position: relative; text-align: center; } [id^="contTab"]:checked ~ .content-more .gradient { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#fff)); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), #fff); background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0), #fff); height: 80px; position: absolute; left: 0; top: -79px; width: 100%; } [id^="contTab"]:checked ~ .content-more .readmore { display: inline-block; background: #319a1717; color: #0014ff9e; width: 300px; height: 30px; border-radius: 32px; line-height: 32px; font-size: 14px; cursor: pointer; text-indent: 0; }
其实这里有一段JS代码:
function inner(response) { for (var val of response.data) { document.getElementById('content-ul').innerHTML += '' + '
' + val.title + '
' + '' + val.author_name + ' / ' + layui.util.toDateString(val.update, "yyyy-MM-dd HH:mm:ss") + '
' + '' + '' + val.content + '
' +
'阐明
改进的方法是采用动态的方法生成并绑定绑定的标签ID属性,然后使用CSS选择器,该选择器采用模糊匹配的方式,不限于特定的ID选择器。
源代码
此代码片段用于 M&OAS 项目。 您可以点击此处查看相关代码信息并获取更完整的代码。
PS:如果进去发现没有相关的代码块,不要惊慌。 也许我还没有上传到GITHU。 请大家见谅QAQ~
发表评论