纯CSS实现点击展开全文功能

看标题大家不难猜到我今天要实现的功能,点击展开全文。 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结合起来还可以做更多好玩的事,下次有机会再跟你们细聊。

主题测试文章,只做测试使用。发布者:小屋,转转请注明出处:http://www.rumenwu.com/site/1584.html

(8)
小屋的头像小屋
上一篇 2020年10月20日 下午3:06
下一篇 2020年10月26日 下午9:44

相关推荐

  • 伤口消毒用碘酒还是碘伏?

    伤口消毒用什么?

    建站入门 2025年1月17日
    34800
  • 11个SEO最常见问题解答

    SEO 初学者最经常会提到这些问题: 1、帮我看看我的站点 XXX.XXX.com SEO 得怎么样? 简单的 SEO 评估,我们主要从这几个方面: 网站导航和链接是否采用 Html 方式实现。 是否实现 URL 静态化。 关键词优化是否到位,包括标题的书写、关键词的设置、关键词密度控制等。 网站结构是否合理,是否有简单的 SEO技巧。 2、搜索引擎一般多长…

    建站入门 2018年2月21日
    50700
  • 关键词密度多少比较好?

    很多SEO前辈都回答过这个问题。答案分别是:2-8%、3-7%、低于10%、5%左右,你自己选一个吧。关键词密度是一个模糊的概念而不是绝对。 关键词密度并不是越高越好,下面的解释,你或许会明白关键词密度意味着什么? 搜索引擎的工作流程大概是这样的: 1、对网页进行索引。这是Robot的工作,搜索机器人很勤奋,所以被收录是最简单的事情了。(但却有不少人老是在埋…

    建站入门 2018年4月12日
    70100
  • 什么是长尾关键词?

    分析网站的搜索流量和关键词,我们发现: 1、对于一般小型网站,目标关键词带来的流量占网站总搜索流量的绝大部分。 2、存在于网站目录页、内容页的关键词也会带来流量,但为数不多。 网站上非目标关键词但也可以带来搜索流量的关键词,称为长尾关键词。 长尾关键词具有的特征如: 1、比较长,往往是2-3个词组成,甚至是短语。 2、存在于内容页面,除了内容页的标题,还存在…

    建站入门 2018年3月2日
    53400
  • 如何增加导入链接?

    如何增加导入链接? 1、向目录网站(如DMOZ-开放目录)提交你的网址。 2、与相关、相似内容的网站交换友情链接。 3、书写“宣传软文”,并发表在合适的站点上。软文上带着站点的链接。 4、站点上的文章写明版权声明。 5、高质量的文章,将获得转载和导入链接。 6、在人气旺的论坛上发表文章和留言,并带着签名指向你的站点。 7、在博客上留言,名称指向你的站点。(适…

    建站入门 2018年8月28日
    56000

发表回复

登录后才能评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信