怎么用纯css实现折叠效果?(附代码)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章主要给大家介绍如何用
纯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>

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

怎么用纯css实现折叠效果?(附代码)

本篇文章就是关于用纯css实现折叠效果的方法介绍,也是非常简单易懂的。希望对需要的朋友有所帮助!

想要了解更多前端相关知识,可以关注PHP中文网HTML视频教程、CSS视频教程、Bootstrap视频教程等等相关前端教程,欢迎大家参考学习!

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » 怎么用纯css实现折叠效果?(附代码)

发表评论

提供最优质的资源集合

立即查看 了解详情