开发者社区> 问答> 正文

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

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

展开
收起
爵霸 2016-06-17 11:00:25 2435 0
2 条回答
写回答
取消 提交回答
  • 既然都用到标签了,那直接用js实现好一点吧,还可以自定义折叠和展开的动画效果。

    2019-07-17 19:42:11
    赞同 展开评论 打赏
  • 可以用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>
    2019-07-17 19:42:11
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载