CSS收縮展開列表是網站設計中常用的一個功能，可以使頁面信息更加清晰、簡潔。本文將介紹如何實現一個基本的CSS收縮展開列表。

首先，我們需要使用HTML和CSS創建一個基本的列表。代碼如下：

<ul class="list">
<li class="item">
<div class="header">列表1</div>
<div class="content">內容1</div>
</li>
<li class="item">
<div class="header">列表2</div>
<div class="content">內容2</div>
</li>
</ul>
.list {
list-style: none;
padding: 0;
margin: 0;
}
.item {
border: 1px solid #ccc;
margin-bottom: 10px;
}
.header {
background-color: #f5f5f5;
padding: 5px;
cursor: pointer;
}
.content {
display: none;
padding: 5px;
}

以上代碼創建了一個包含兩個列表項的無序列表，每個列表項包含一個標題和一個內容。標題部分使用了CSS cursor屬性來實現鼠標移動到上面時變成手型的效果。

接下來我們使用jQuery庫來實現標題部分的點擊事件，使得每次點擊標題部分時其下的內容能夠展開/收縮。代碼如下：

$('.header').click(function() {
$(this).next('.content').slideToggle(200);
});

以上代碼使用了jQuery的slideToggle()方法來實現內容的展開/收縮，當點擊標題時，其下的內容將以200毫秒的速度展開/收縮。

至此，我們已經成功地實現了一個CSS收縮展開列表。這個列表可以根據需要擴展和修改，例如添加動畫效果或更改樣式。

本文提供的代碼和方法僅供參考，讀者可以根據自己的需求和對規范的了解進行修改和優化。