一个好看的经典点击展开全文功能,纯CSS
0
先来看一下效果:
css :checked伪类选择器
思路是使用checkbox的:checked来做隐藏和显示。跟上面这个CSS Tab使用radio来实现是差不多的。当点击label标签时,会绑定同步点击 "for" 属性值为 "checkbox" 的 "id"。
html代码如下:
<input type="checkbox" id="contTab" checked="checked" class="tabbed">
<div id="cont">这是前端开发博客的正文</div>
<div class="content-more"><div class="gradient"></div> <label for="contTab" class="readmore">点击展开全文</label></div>
当我点击“点击展开全文”时,也就点击了checkbox,也就改变了checkbox的状态为非选中状态了,根据两个状态来显示不同的CSS,从而实现了展开的功能。需要说明的是这个CSS选择符只兼容IE9及以上。如果要兼容IE8等,可能这个方案就不适合了。
CSS代码如下:
/*阅读全文*/ #contTab{ display: none; } .content-more{ display: none; } #contTab:checked ~ #cont{ max-height: 600px; overflow: hidden; } #contTab:checked ~ .content-more{ display: block; position: relative; padding-top: 20px; padding-bottom: 30px; text-align: center; } #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%; } #contTab:checked ~ .content-more .readmore{ display: inline-block; background: #0067cb; color: #fff; width: 175px; height: 42px; border-radius: 42px; line-height: 42px; font-size: 16px; cursor: pointer; }
兄弟选择符(E~F)
从上面的CSS,大家可以看到我用了这个CSS强大的选择符,顾名思义,选择E元素后面的所有兄弟元素F。与相邻选择符不同的是,兄弟选择符会命中所有符合条件的兄弟元素,而不强制是紧邻的元素。
另外说一下这个选择符支持IE7及以上。
总结:
如果你的网站不需要兼容IE9以下的,可以使用我这个方案来实现展开全文的需求。当然label和checkbox结合起来还可以做更多好玩的事,下次有机会再跟你们细聊。

css点击显示隐藏文字 点击展开全文怎么设置 推文点击展开图片 点击展开播放列表 质量功能展开源自于 为什么点击展开全文不灵 css3文字跳动特效 产品功能展开 点击展开全部分类 简述质量功能的展开