CSS 是前端開發(fā)中的基礎(chǔ)技術(shù)之一，它可以實(shí)現(xiàn)頁面的樣式和布局，其中一個常見的功能是展開和收縮。本文將為大家介紹如何使用 CSS 實(shí)現(xiàn)展開和收縮功能。

.content {
height: 0;
overflow: hidden;
transition: height 0.3s ease-in-out;
}
.show {
height: auto;
}

首先，我們需要為需要展開和收縮的內(nèi)容設(shè)置樣式。在上面的代碼中，我們使用.content選擇器來設(shè)置樣式，設(shè)置內(nèi)容高度為 0，隱藏超出部分，并且啟用一個過渡特效，讓展開和收縮更加平滑。

接下來，我們需要一個觸發(fā)展開和收縮的按鈕。可以使用<button>或者<a>等標(biāo)簽來創(chuàng)建一個按鈕。在本文中，我們使用一個<div>元素來作為按鈕，給它一個類名.toggleButton。

<div class="toggleButton">展開/收縮</div>

然后，我們需要一些 JavaScript 來控制展開和收縮。在監(jiān)聽按鈕點(diǎn)擊事件后，我們可以使用.show類名來改變內(nèi)容的高度，從而實(shí)現(xiàn)內(nèi)容的展開和收縮。

const toggleButton = document.querySelector('.toggleButton');
const content = document.querySelector('.content');
toggleButton.addEventListener('click', function() {
content.classList.toggle('show');
});

通過上述代碼，我們就可以實(shí)現(xiàn)一個簡單的展開和收縮功能。在按鈕被點(diǎn)擊后，我們向內(nèi)容添加.show類名，從而改變內(nèi)容高度。當(dāng)再次點(diǎn)擊按鈕時，我們從內(nèi)容中移除.show類名，使其恢復(fù)原有的高度。

總之，CSS 是一個強(qiáng)大的前端技術(shù)，它可以幫助我們實(shí)現(xiàn)許多功能，包括展開和收縮。我們可以使用 CSS 來設(shè)置內(nèi)容的樣式和過渡，同時使用 JavaScript 來控制功能的觸發(fā)和狀態(tài)的改變，從而實(shí)現(xiàn)一個具有交互感的展開和收縮功能。