纯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

相关推荐

  • WordPress七牛云静态文件CDN加速配置教程

    WordPress网站优化加速一直都是广大站长比较关注的问题,今天主要介绍一下基于七牛云的静态文件(比如图片、js、css)CDN加速的设置方法。 CDN还是对象储存? 目前我们接触到的很多客户都是基于第三方插件对接的对象存储服务,这个本身其实也是没什么问题的,不过接触下来发现很多用户经常会遇到插件选择、文件同步、缩略图生成等各种问题,所以我们更推荐的是CD…

    建站入门 2018年11月2日
    88700
  • 写网页内容需要注意些什么?

    网页内容是写给谁看的? 这个问题不是客户问我的,而是我提出的。对这个问题的理解和把握,可以看出你对SEO的认识程度。 或许很多网站设计者会毫不犹豫地说:“网页内容,当然是给用户看的呀”。其实,这是第一代网站建设的思维,已经落伍了很多年。第三代SEO网站建设思想指出:网页内容,不只是给用户看,更是给搜索引擎看。 网页内容要写给用户看,你需要: 1、懂得广告学思…

    建站入门 2018年4月13日
    83500
  • WordPress响应式主题添加视频手机端不显示问题解决办法

    随着移动互联网的发展,现在手机端的流量占比越来越大,响应式主题由于兼容PC和移动端以及部署方便等优点也被广大站长使用接受,不过由于电脑和手机系统兼容性的问题,很多用户遇到视频播放的问题:在网站添加的视频在电脑上可以正常播放,一到手机上就无法显示。 问题原因 电脑上一般都会安装flash控件,视频大多也是使用flash播放器来播放的,而手机端目前网页播放视频都…

    建站入门 2018年10月16日
    94700
  • Typecho使用指南 – 主题&插件

    前言 自从买VPS,就一直研究还可以做些什么?于是,我想到自己搭建个博客,上网看看了,感觉Typecho,挺不错的。故写下此篇博客。 准备 Typecho 安装 下载Typecho压缩包,上传服务器wwwroot下,把所有文件解压出来。 进入数据库中,创建一个typecho的数据库。 在浏览器中访问您的域名将自动跳转到安装地址(记得要绑定域名),点击“我准备…

    建站入门 2018年11月12日
    1.7K00
  • SEO文章怎么写?SEO文章写作逻辑

    本文大纲: 01 SEO文章的写作思路 02 SEO文章的写作举例 03 SEO文章撰写技巧 01 SEO文章的写作思路 1、选题(选关键词) 自媒体运营写文章的时候,会有选题这个环节,选题的目的在于能够最大程度激发用户的需求点。对于SEO文章来说,其实也是一样的,在SEO里选题其实就是选关键词,选目标词。如果选择了一个搜索量很小的关键词,这样从开始的时候就…

    建站入门 2022年2月7日
    87900

发表回复

登录后才能评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

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

关注微信