首页新闻找找看学习计划

怎么实现CSS文字段落的展开和收起

0
[待解决问题]

不适用jQuery。实现如下的效果,有向下的尖括号的。

求大神帮助~

下面这个讲的很详细,但是还是不知道怎么实现。

http://www.cnblogs.com/lilyimage/p/4086869.html

liudddd的主页 liudddd | 菜鸟二级 | 园豆:202
提问于:2017-01-12 17:00
< >
分享
所有回答(2)
0

使用css的hover伪类就能实现 配合修改高度


好来污影后 | 园豆:287 (菜鸟二级) | 2017-01-12 17:25

大神,可以具体指导一下吗?

支持(0) 反对(0) liudddd | 园豆:202 (菜鸟二级) | 2017-01-12 17:37

明天吧,我今晚没有时间,明天上班我抽几分钟给你做个demo


支持(0) 反对(0) 好来污影后 | 园豆:287 (菜鸟二级) | 2017-01-12 19:06

@冰果在线: 好的,非常感谢

支持(0) 反对(0) liudddd | 园豆:202 (菜鸟二级) | 2017-01-12 22:56

@道亦有盗: 

<!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>
支持(2) 反对(0) 好来污影后 | 园豆:287 (菜鸟二级) | 2017-01-13 09:15

@冰果在线: 感谢大神~按照你说的,我把hover 换成click事件试试~

支持(1) 反对(0) liudddd | 园豆:202 (菜鸟二级) | 2017-01-13 10:21
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 高度就会变化,照着这个思路应该可以做出来。

by.Genesis | 园豆:1626 (小虾三级) | 2017-01-13 10:08

恩,你说的这个也是可以的。参考你的,我是这么实现的:

.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>

 

支持(0) 反对(0) liudddd | 园豆:202 (菜鸟二级) | 2017-01-13 10:20
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册