在網(wǎng)頁開發(fā)中，一些列表的收縮展開功能是非常常見的。今天我們來學習一下如何使用CSS來實現(xiàn)一個基礎的收縮展開列表。

HTML結構示例：
<div class="container">
<div class="item">
<h2 class="title">列表1</h2>
<ul class="list">
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
</ul>
</div>
<div class="item">
<h2 class="title">列表2</h2>
<ul class="list">
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
</ul>
</div>
</div>
CSS樣式示例：
.container {
width: 500px;
margin: 0 auto;
}
.item {
background-color: #f2f2f2;
margin-bottom: 10px;
padding: 10px;
cursor: pointer;
}
.title {
margin: 0;
}
.list {
display: none;
margin: 0;
padding: 0;
}
.item.active .list {
display: block;
}
JavaScript代碼示例:
const items = document.querySelectorAll('.item');
items.forEach((item) =>{
item.addEventListener('click', () =>{
item.classList.toggle('active');
});
});

這里我們使用了HTML和CSS來構建列表，使用JavaScript來監(jiān)聽點擊事件并添加active類來實現(xiàn)列表的展開和收縮。這個例子非常簡單，但是可以為你提供一個思路用來實現(xiàn)更復雜的收縮展開列表。