純 CSS 點(diǎn)擊展開收縮是一個常見的前端需求，在很多場景中都會使用到。這種效果可以用 JavaScript 來實(shí)現(xiàn)，但使用純 CSS 實(shí)現(xiàn)會使頁面更加輕量，減少 JavaScript 的加載，提高頁面性能。

使用 CSS 實(shí)現(xiàn)展開收縮，一般需要借助一些 CSS 選擇器和偽元素來實(shí)現(xiàn)。為了實(shí)現(xiàn)這個效果，我們需要一個帶有內(nèi)容的容器，以及一個控制展開收縮的觸發(fā)器。

以下是一個基礎(chǔ)的純 CSS 點(diǎn)擊展開收縮的代碼示例：

<div class="container">
<p>這是一個需要收縮的內(nèi)容</p>
<input type="checkbox" id="toggle" hidden>
<label for="toggle"></label>
</div>
/* CSS 樣式 */
.container {
border: 1px solid #ccc;
padding: 10px;
overflow: hidden;
transition: height .5s;
max-height: 0;
}
.container input[type=checkbox]:checked ~ p {
display: block;
}
.container input[type=checkbox]:checked ~ label::after {
content: "收起";
}
.container input[type=checkbox]:not(:checked) ~ label::after {
content: "展開";
}
.container label::after {
display: inline-block;
margin: 0 10px;
cursor: pointer;
content: "展開";
}

代碼中，我們首先設(shè)置了一個容器，并將其高度設(shè)置為 0，同時給其中的文本內(nèi)容添加了一個 p 標(biāo)簽。接著，我們添加了一個隱藏的復(fù)選框，以及一個通過 label 標(biāo)簽關(guān)聯(lián)復(fù)選框的 label 元素，用作控制展開收縮的觸發(fā)器。

在樣式中，我們對容器的高度進(jìn)行了過渡處理，當(dāng)復(fù)選框被選中時，通過選擇器設(shè)置容器的最大高度為內(nèi)容高度，從而展開容器。同時，我們通過該復(fù)選框來切換展開和收縮的狀態(tài)，并在 label 的偽元素中顯示具體的提示信息。

此外，我們還可以根據(jù)實(shí)際需求進(jìn)行樣式優(yōu)化和功能擴(kuò)展，使效果更加豐富、美觀。