CSS折疊展開列表是常用的網(wǎng)頁設(shè)計效果之一，也是網(wǎng)站制作者推廣內(nèi)容、吸引用戶點擊的良好方式。下面就來介紹CSS如何制作展開折疊列表。

代碼如下：
HTML：
<div class="accordion">
<div class="accordion-header">標題1</div>
<div class="accordion-content">
內(nèi)容1
</div>
<div class="accordion-header">標題2</div>
<div class="accordion-content">
內(nèi)容2
</div>
<div class="accordion-header">標題3</div>
<div class="accordion-content">
內(nèi)容3
</div>
</div>
CSS：
.accordion .accordion-header {
background-color: #f4f4f4;
color: #333;
padding: 10px;
cursor: pointer;
border: none;
outline: none;
font-size: 16px;
text-align: left;
transition: 0.4s;
}
.accordion .accordion-header.active, .accordion .accordion-header:hover {
background-color: #ddd;
}
.accordion .accordion-content {
display: none;
background-color: #fff;
padding: 10px;
border: none;
outline: none;
font-size: 16px;
text-align: left;
}
.accordion .accordion-header.active + .accordion-content {
display: block;
}

此代碼中，我們先用HTML創(chuàng)造一個div包住所有的條目，并依次創(chuàng)建每一個展開折疊菜單。CSS主要將每一個菜單的頭部背景文字展示進行格式排版，同時設(shè)置展開/折疊效果時的過渡效果和樣式。

通過以上代碼，我們就可以輕松實現(xiàn)展開折疊列表的效果了。