umtheme 文字的展开收起这个用JS很容易就可以实现，不过我们今天实现的方法有些特殊，通过纯css去实现此效果。假如有如下html代码<p>纯css文字展开收起效果讲解</p> <div class="box"> <p>优美主题是web建站技术，前端开发，视觉设计等学习交流的平台，提供最新和...
文字的展开收起这个用JS很容易就可以实现，不过我们今天实现的方法有些特殊，通过纯css去实现此效果。
假如有如下html代码
<p>纯css文字展开收起效果讲解</p> <div class="box"> <p>优美主题是web建站技术，前端开发，视觉设计等学习交流的平台，提供最新和免费的zblog主题下载</p> </div> <label for="check" class="check-in">更多↓</label> <label for="check" class="check-out">收起↑</label>
要实现box里面的内容开始是隐藏的
.box {
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>
.box {
max-height:0;
overflow:hidden;
}
:checked ~ .box {
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>纯css实现更多收起效果</p>
<div class="box">
<p>优美主题是web建站技术，前端开发，视觉设计等学习交流的平台，提供最新和免费的zblog主题下载</p>
</div>
<label for="check" class="check-in">更多↓</label>
<label for="check" class="check-out">收起↑</label>
</body>
</html>
