怎么用纯css实现折叠效果？（附代码）-css教程-PHP中文网

怎么用纯css实现折叠效果？（附代码）

藏色散人

发布： 2018-10-19 16:09:09

原创

6896人浏览过

本篇文章主要给大家介绍如何用纯css实现折叠效果。

我们在前端页面开发过程中，折叠效果通常会用在导航栏或者下拉列表中。对于前端新手来说，可能有一定的难度。

下面我们就通过简单的css代码示例，为大家详细介绍用css实现折叠效果的具体方法。

html+css代码示例如下：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>纯css实现折叠效果</title>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #parent >li> span{background: #b2ecef;display: block;width: 200px;border:1px solid #ECEEF2;}
        li {line-height: 40px;display: block;}
        li  p{
            display: inline-block;
            width: 0px;
            height: 0px;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid #1094f2;
        }
        li>ul{display: none;}
        li>ul>li{border: 1px solid #DEDEDE;width: 199px;}
        #parent span:hover + ul{display: block;}
        #parent span:hover >p{
            display: inline-block;
            width: 0px;
            height: 0px;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-left: 5px solid#2f2f2f;}
 </style>
</head>
<body>
<ul id="parent">
    <li>
        <span><p></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>主列表</span>
        <ul>
            <li>子列表1</li>
            <li>子列表2</li>
            <li>子列表3</li>
        </ul>
    </li>
</ul>

</body>
</html>

登录后复制

前台最终实现折叠效果如下图：

录制_2018_10_18_16_51_46_710.gif