站长资源
中国站长网站

纯css文字展开收起效果讲解

纯css文字展开收起效果讲解

文字的展开收起这个用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>

本文由站长资源原创首发,转载请注明出处


在线演示  
×

站长资源极速下载通道: 纯css文字展开收起效果讲解

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » 纯css文字展开收起效果讲解

评论 抢沙发

评论前必须登录!