怎麼用純css實現折疊效果？ （附代碼）
- 藏色散人原創
- 2018-10-19 16:09:096570瀏覽
本篇文章主要跟大家介紹如何用純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實現折疊效果的方法介紹，也是非常簡單易懂的。希望對需要的朋友有幫助！
想要了解更多前端相關知識，可以關注PHP中文網HTML影片教學、CSS影片教學、Bootstrap影片教學等等相關前端教程，歡迎大家參考學習！
以上是怎麼用純css實現折疊效果？ （附代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn