css - 有没有标签支持把一段文字折叠展开的效果？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

css - 有没有标签支持把一段文字折叠展开的效果？

迷茫 2017-04-17 13:26:16

[HTML讨论组]

528

类似百度的这个效果但是百度的这个好像用的p或者span来产生折叠的这种效果有没有简单点的办法我以前好像见过把一段文字可以折叠的这种标签现在记不起来了

迷茫

业精于勤，荒于嬉;行成于思，毁于随。

全部回复(1)

天蓬老师2017-04-17 13:28:16 1楼

可以用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>
    <p class="item">
        <p class="title">垃圾信息举报</p>
        <input type="checkbox">
        <span class="ico"></span>
        <p class="content">
          感谢您的反馈
        </p>
    </p>
</body>

Demo
http://runjs.cn/detail/uvygbtks

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>