类似百度的这个效果 但是百度的这个好像用的div或者span来产生折叠的这种效果 有没有简单点的办法 我以前好像见过把一段文字可以折叠的这种标签 现在记不起来了
可以用checkbox和CSS相邻选择器的特性来做
<style>
.item{
position: relative;
border:1px solid #CCC;
padding:5px;
}
.title{
height: 30px;
}
.item input[type=checkbox]{
opacity: 0;
position: absolute;
top:0;
left:0;
width:100%;
height: 30px;
z-index:2;
}
.item .ico{
position: absolute;
right:5px;
top:5px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg)
}
.item .ico:after{
content:'>';
}
.item input[type=checkbox]:checked+.ico{
-webkit-transform: rotate(90deg);
transform: rotate(90deg)
}
input[type=checkbox]:checked~.content{
display: none;
}
</style>
<body>
<div class="item">
<div class="title">垃圾信息举报</div>
<input type="checkbox">
<span class="ico"></span>
<div class="content">
感谢您的反馈
</div>
</div>
</body>
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。