如何通过纯CSS实现“点击展开全文”功能

看标题大家不难猜到我今天要实现的功能，正如你打开最省事的文章，在正文下面看到的按钮“点击展开全文”。 思路是使用CSS :checked伪类选择器来做隐藏和显示。当点击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>

将上述代码加入到 single.php 文件里面，按钮一般命名为“点击展开全文”、“查看更多”或者“继续阅读”等等。

在最省事的文章中，当点击“点击展开全文”时，也就点击了checkbox，也就改变了checkbox的状态为非选中状态了，根据两个状态来显示不同的CSS，从而实现了展开的功能。 需要说明的是这个CSS选择符只兼容IE9及以上。如果要兼容IE8等，可能这个方案就不适合了。最后，将下面代码加入到 style.css 文件里面即可。

CSS代码

您需要付费解锁才能查看当前内容

付费解锁 ¥10.00

开通会员

白银会员¥6.00

黄金会员¥免费

已有38人解锁查看

已付费？登录 或 刷新

操作这个按钮的注意事项有哪些？

其实这个才是关键，不要小看这个按钮，因为搞不好会导致网站降权，同时百度有明确的说明，这个按钮的规范。主要有以下几个方面。

1. 按钮和广告位的要有一定的间距，个人建议间距在30个像素左右最合适，避免用户误触碰到广告位。当你挂上广告位后，可以使用百度落地页检测工具去检测一下，看有没有问题。
2. 按钮必须要在第二屏以后，篇幅可以隐藏，但不能隐藏太多，总不能把文章页的文章全部给隐藏了，变成列表页。
3. 不能使用JS来隐藏，一定要用CSS，因为如果你的内容在JS里面，那么搜索引擎就无法识别到你的内容了，文字识别不了，这个页面很可能就是一个空白页面了。