如何通过纯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代码

/*阅读全文*/
#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;
}

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

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

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

本文来自【白熊助理】的投稿,部分内容可能来源于互联网,旨在传递信息,不代表【最省事】的观点和立场。侵权投诉>>

转载须获作者授权,并注明出处:如何通过纯CSS实现“点击展开全文”功能丨最省事授权申请>>

发表评论

登录后才能评论