看标题大家不难猜到我今天要实现的功能&＃xff0c;正如你打开我的博客文章&＃xff0c;在正文下面看到的按钮&＃xff0c;点击展开全文。 本文简要的为大家介绍一下&＃xff0c;方便理解掌握。
CSS :checked伪类选择器
思路是使用checkbox的:checked来做隐藏和显示。跟上面这个CSS Tab使用radio来实现是差不多的。当点击label标签时&＃xff0c;会绑定同步点击 "for" 属性值为 "checkbox" 的 "id"。
HTML代码如下&＃xff1a;
当我点击“点击展开全文”时&＃xff0c;也就点击了checkbox&＃xff0c;也就改变了checkbox的状态为非选中状态了&＃xff0c;根据两个状态来显示不同的CSS&＃xff0c;从而实现了展开的功能。需要说明的是这个CSS选择符只兼容IE9及以上。如果要兼容IE8等&＃xff0c;可能这个方案就不适合了。
CSS代码如下&＃xff1a;
/*阅读全文*/
#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&＃xff0c;大家可以看到我用了这个CSS强大的选择符&＃xff0c;顾名思义&＃xff0c;选择E元素后面的所有兄弟元素F。与相邻选择符不同的是&＃xff0c;兄弟选择符会命中所有符合条件的兄弟元素&＃xff0c;而不强制是紧邻的元素。
另外说一下这个选择符支持IE7及以上。
总结
如果你的网站不需要兼容IE9以下的&＃xff0c;可以使用我这个方案来实现展开全文的需求。当然label和checkbox结合起来还可以做更多好玩的事&＃xff0c;下次有机会再跟你们细聊。
京公网安备 11010802041100号