使用CSS实现点击展开阅读全文功能的案例

tangjin

作者

这篇文章主要介绍了使用CSS实现点击展开阅读全文功能的案例，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

参考了文章 caibaojian.com/css-tonggle… 的纯 CSS 的想法, 但文章描述的内容适用于单篇文章的效果, 而在使用 <li></li> 标签生成表数据的情况下并不友好, 所以在此基础上进行了相对应的优化, 具体代码如下：

<div>
<ulid="content-ul">
<!--这是存放文章内容LI标签的标签体-->
</ul>
</div>

[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,lefttop,leftbottom,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 的代码：

functioninner(response){
for(varvalofresponse.data){
document.getElementById('content-ul').innerHTML+=''+
'<li>'+
'<h3class="title">'+val.title+'</h3>'+
'<pclass="update_author">'+val.author_name+'/'+layui.util.toDateString(val.update,"yyyy-MM-ddHH:mm:ss")+'</p>'+
'<inputtype="checkbox"id="contTab_'+val.id+'"checked="checked"class="tabbed">'+
'<divid="content">'+val.content+'</div>'+
'<divclass="content-more"><divclass="gradient"></div><labelfor="contTab_'+val.id+'"class="readmore">点击查阅全文</label></div>'+
'</li>'
}
}

说明

改善的方式是将绑定的标签 ID 属性使用动态的方式生成并绑定, 其次使用 CSS 选择器, 使用的是模糊匹配的方式, 不局限于某个具体的 ID 选择器。

源码

该代码片段是应用于 M&OAS 项目中, 你可以点击这里查看相关的代码信息, 获得更加完整的代码。

PS：如果你进去了居然发现没有相关的代码块, 不要惊慌, 可能我还没有上传到 GITHU 上, 多多包涵 QAQ ~