纯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 15:06
下一篇 2020-10-26 21:44

相关推荐

  • WordPress SMTP邮件发送插件:Easy WP SMTP

    现在很多站长问入门屋小编:WordPress如何实现注册、找回密码邮件验证通知功能,每次回答相同的问题,今天入门屋小编推荐一个WordPress SMTP邮件发送插件:Easy WP SMTP 邮件发送是网站的基础功能,WordPress在注册、找回密码、评论通知等地方也会涉及到邮件的发送。一般的虚拟主机都是有自带PHP邮件功能的,VPS、云服务器的话,则是…

    2018-08-30
    4.0K0
  • 使用CSS3实现表格隔行/隔列变色

    废话少说,先看效果,如果不是你想要的,你可以撤了~ 这些都是css控制的,然后我们看下样式: table tr:nth-child(odd){background:#F4F4F4;} table td:nth-child(even){color:#C00;} table tr:nth-child(5){background:#73B1E0;color:#FF…

    2020-11-18
    2.5K0
  • 织梦CMS通用安装教程

    今天先跟大家介绍一下dedecms织梦系统安装的方法步骤,以及织梦数据库还原的教程。详细请看图文讲解:1.运行 http://域名/install/index.php(比如你的域名是:http://www.rumenwu.com/,就输入http://www.rumenwu.com/install/index.php) (注)输入网址 http://域名/i…

    2018-03-08
    2.1K0
  • 政府网站建设网页设计规范

    政府网站要方便公众浏览使用,页面内容要便于复制、保存和打印。要最大限度减少用户额外安装组件、控件或插件;确需使用的,要便于在相关页面获取和安装。应用系统、附件、视频等应有效可用,名称要直观准确。附件、视频等格式应便于常用软件打开,避免用户额外安装软件。避免使用悬浮、闪烁等方式,确需使用悬浮框的必须具备关闭功能。 1.首页不宜过长。在主流计算机配置和当地平均网…

    2020-11-08
    1.8K0
  • WordPress响应式主题添加视频手机端不显示问题解决办法

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

    2018-10-16
    3.0K0
  • WordPress七牛云静态文件CDN加速配置教程

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

    2018-11-02
    2.9K0