這篇文章主要介紹了使用CSS實(shí)現(xiàn)點(diǎn)擊展開閱讀全文功能的案例，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

參考了文章 caibaojian.com/css-tonggle… 的純 CSS 的想法, 但文章描述的內(nèi)容適用于單篇文章的效果, 而在使用 <li></li> 標(biāo)簽生成表數(shù)據(jù)的情況下并不友好, 所以在此基礎(chǔ)上進(jìn)行了相對(duì)應(yīng)的優(yōu)化, 具體代碼如下：

<div>
<ulid="content-ul">
<!--這是存放文章內(nèi)容LI標(biāo)簽的標(biāo)簽體-->
</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;
}

當(dāng)然了, 這兒附上一段 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">點(diǎn)擊查閱全文</label></div>'+
'</li>'
}
}

說明

改善的方式是將綁定的標(biāo)簽 ID 屬性使用動(dòng)態(tài)的方式生成并綁定, 其次使用 CSS 選擇器, 使用的是模糊匹配的方式, 不局限于某個(gè)具體的 ID 選擇器。

源碼

該代碼片段是應(yīng)用于 M&OAS 項(xiàng)目中, 你可以 點(diǎn)擊這里 查看相關(guān)的代碼信息, 獲得更加完整的代碼。

PS：如果你進(jìn)去了居然發(fā)現(xiàn)沒有相關(guān)的代碼塊, 不要驚慌, 可能我還沒有上傳到 GITHU 上, 多多包涵 QAQ ~

總結(jié)

以上是生活随笔為你收集整理的使用CSS实现点击展开阅读全文功能的案例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。