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

互联网 18-10-19

本篇文章主要给大家介绍如何用纯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>主列表</span>         <ul>             <li>子列表1</li>             <li>子列表2</li>             <li>子列表3</li>         </ul>     </li> </ul>  </body> </html>

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