文字的展开收起这个用JS很容易就可以实现,不过我们今天实现的方法有些特殊,我们完全使用css的方式去完成这项工作。
假如有如下html代码
<p>站长资源文字展开收起效果</p> <div class="element"> <p>站长资源 全栈工程师知识站点 致力于为广大站长及web开发人员提供知识的学习及工具、源码、教程、模板、插件等的下载。</p> </div> <label for="check" class="check-in">更多↓</label> <label for="check" class="check-out">收起↑</label>
要实现element里面的内容开始是隐藏的
.element { max-height:0; overflow:hidden; }
点击更多才出现,然后【更多】按钮变成【收起】按钮
难点在于点击动作
说到这里大家想到了什么?没错那就是input的checked选择器,我们在html里增加一个
<input id="check" type="checkbox">
利用这一特性我们就可以对点击动作作出判断
即:选中时候内容展开,且【更多】按钮隐藏,反之亦然
选中:
:checked ~ .check-in { display:none; } :checked ~ .check-out { display:inline-block; }
未选中:
.check-out { display:none; }
是不是发现还有个checkbox框,也隐藏掉呗
input[type="checkbox"] { display:none; }
至此大功告成
完整代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>纯css文字展开收起效果</title> <style> .element { max-height:0; overflow:hidden; } :checked ~ .element { max-height:666px; } input[type="checkbox"] { display:none; } :checked ~ .check-in { display:none; } :checked ~ .check-out { display:inline-block; } .check-out { display:none; } .check-in,.check-out { color:#34538b; cursor:pointer; } </style> </head> <body> <input id="check" type="checkbox"> <p>站长资源文字展开收起效果</p> <div class="element"> <p>站长资源 全栈工程师知识站点 致力于为广大站长及web开发人员提供知识的学习及工具、源码、教程、模板、插件等的下载。</p> </div> <label for="check" class="check-in">更多↓</label> <label for="check" class="check-out">收起↑</label> </body> </html>
本文由站长资源原创首发,转载请注明出处
评论前必须登录!
注册