怎么实现CSS文字段落的展开和收起
0
所有回答(2)
0
使用css的hover伪类就能实现 配合修改高度
大神，可以具体指导一下吗？
明天吧，我今晚没有时间，明天上班我抽几分钟给你做个demo
@冰果在线: 好的，非常感谢
@道亦有盗:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .test { width: 100px; height: 100px; overflow: hidden; transition:all .6s ease-in-out; -webkit-transition:all .6s ease-in-out; -moz-transition:all .6s ease-in-out; -o-transition:all .6s ease-in-out; -ms-transition:all .6s ease-in-out; background-color: orange; position: relative; } .test::after { content: '∨'; display: block; width: 20px; height: 20px; position: absolute; top: 0; left: 0; background-color: red; } .test:hover { height: 200px; background-color: purple; } .test:hover::after { content: '∧' } </style> </head> <body> <div class="test"> 正值毕业生求职季，各路招聘网站上，年终奖已成为企业吸引人才的“标配”。与此同时，吐槽年终奖的声音也多:有的单位出手大方，有的悭吝寒酸，有的临时决定啥也不发;有的抽奖，员工靠运气“抢”，有的甚至几袋馒头“意思一下”……年终奖发不发、怎么发，门道真不少。 </div> </body> </html>
@冰果在线: 感谢大神~按照你说的，我把hover 换成click事件试试~
0
看不懂他那个，在不使用 js 的情况下不知道他是如何给 summary 添加和删除 packup 这个 class 的。
不过想要用 CSS 模拟点击的功能，一个思路是可以用 checkbox 来实现：
<input type="checkbox"> <div></div>
样式：
input[type="checkbox"] + div { height: 60px; } input[type="checkbox"]:checked + div { height: 200px; }
这样点击 checkbox 的时候后面的 div 高度就会变化，照着这个思路应该可以做出来。
恩，你说的这个也是可以的。参考你的，我是这么实现的：
.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;
}
<div class="item">
<div class="title">未被隐藏xxxx</div>
<input type="checkbox">
<span class="ico"></span>
<div class="content">
感谢您的反馈感谢您的反馈感谢您的反馈感谢您的反馈感谢您的反馈感谢您的反馈感谢您的反馈感谢您的反馈感谢您的反馈感谢您的反馈
</div>
</div>
