纯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

相关推荐

  • 二级域名如何绑定一级目录

    二级域名绑定一级目录其实很简单。 在 DNS 域名管理后台域名转发里,设置二级域名转发至你的目标一级目录。 提交后,在主机记录列表会添加一个你刚才提交的二级域名,其指向的IP地址与主域名不同。比如,新网互联指向的是:124.42.122.46。这个是正确的。 不管你使用的虚拟主机,还是独立服务器。只要主域名可以正常访问即可,不需要在虚拟主机或独立服务器上再设…

    建站入门 2018年3月2日
    66500
  • 百度搜索网页标题规范

    对搜索用户来说,标题是一个网页最直观的认知渠道和展现方式,也是吸引用户点击搜索结果进入落地页的关键因素。 为了保障搜索用户对所需资源的有效获取,保证搜索结果的公平性,现百度搜索对外发布《百度搜索网页标题规范》,希望在满足用户需求的同时,为站长带来更多流量,实现共赢。 1、标题的定义 对网页内容的准确且简明扼要的描述。 具体举例: 图1-1 符合规范的标题示例…

    建站入门 2019年3月15日
    99200
  • 如何设置首选域?

    两种方法设置首选域: 301重定向的方法设置首选域。 使访问rumenwu.com/的时候就会自动转到 www.rumenwu.com。在.htaccess文件里写上以下代码: RewriteEngine on RewriteCond %{http_host} ^mydomain.com [NC] RewriteRule ^(.*)$ http://www.…

    建站入门 2018年3月2日
    94900
  • 什么叫反向链接?

    经常听到大家在入门屋里说反向链接多么重要但我一头雾水,到底什么是反向链接? 看以上这行内容中,“入门屋”这几个字链接指向了 http://www.rumenwu.com/。这个链接我们称为 直接链接。 对于搜外问答来讲,这个链接是它的反向链接。 简单概括如下: 网页A 上有一个链接指向网页B,则网页A 上的链接是网页B 的反向链接。 SEO 中谈到的反向链接…

    建站入门 2018年8月28日
    78800
  • 什么是搜索引擎优化SEO?

    搜索引擎优化SEO的本质是:优化你的网站,让搜索引擎蜘蛛(spider)更好的阅读和抓取。 搜索引擎蜘蛛浏览和阅读网站的HTML内容。因此,如果你的网站导航或文字内容是框架(Frames),图片,JavaScript或Flash,则搜索引擎蜘蛛将不能全部或部分抓取你的站点内容。不管你的站点是:内容管理系统(CMS)、电子商务系统(e-commerce sys…

    建站入门 2018年3月2日
    91100

发表回复

登录后才能评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

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

关注微信