首页 建站教程 WEB前端 正文

纯css通过input的checked值实现展开收起效果

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

查看演示

打赏
海报

声明:本站部分资源内容为站内原创著作,也有部分基于互联网公开分享整理,版权归原作者所有。
如侵犯到您的权益,请联系本站,我们会尽快处理,谢谢。转摘请注明出处

本文链接:https://www.umtheme.com/web/209.html

相关推荐

纯css实现菜单或列表循环向上滚动效果

纯css实现菜单或列表循环向上滚动效果

在前端开发过程中,有时候针对某个模块需要无限循环的滚动一些消息或菜单,我们常用的方法基本上都是通过js来实现,虽然代码相对来说可能会精简一些,但是对于JS不是很熟悉的同学来说还是不太好理解,毕竟相对于...
WEB前端 2022.08.17 0 184
纯CSS3实现3D切换选项卡

纯CSS3实现3D切换选项卡

Tab选项卡是大家最常用的功能之一,因为兼容性的问题目前大多朋友也都是用js书写,当然我也会用JS去书写,必定web端的应用你的用户群体...
WEB前端 2022.08.16 0 297
发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
感谢您的支持