這篇文章主要介紹了使用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 ~

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。