CSS展開(kāi)收起效果是一種常見(jiàn)的頁(yè)面交互效果，可以讓長(zhǎng)文章或者大塊內(nèi)容更加精簡(jiǎn)，能夠提高用戶(hù)體驗(yàn)。那么要如何實(shí)現(xiàn)CSS展開(kāi)收起效果呢？下面是展開(kāi)收起效果的經(jīng)典示例：

<div class="main">
<p>這是一段正常的文本內(nèi)容，不會(huì)自動(dòng)收起。</p>
<div class="content">
<p>這是一段需要展開(kāi)的文本內(nèi)容，可以通過(guò)CSS控制顯示或隱藏。</p>
<p>這是另一段需要展開(kāi)的文本內(nèi)容。</p>
</div>
<p class="more">展開(kāi)</p>
<p class="less">收起</p>
</div>

這個(gè)例子中，我們將需要展開(kāi)的內(nèi)容封裝在一個(gè)div元素中，并添加一個(gè)類(lèi)名為content。我們可以在CSS文件中為這個(gè)類(lèi)名定義display:none屬性，讓這些內(nèi)容一開(kāi)始是隱藏的。

接著，我們?yōu)檎归_(kāi)和收起操作分別添加類(lèi)名為more和less的p元素。我們默認(rèn)展示收起操作，將展示操作的display屬性設(shè)為none。在樣式表中，定義這些類(lèi)名的屬性如下：

.content {
display: none;
}
.more {
display: block;
}
.less {
display: none;
}

現(xiàn)在，我們需要一些JavaScript代碼來(lái)實(shí)現(xiàn)展開(kāi)和收起的互動(dòng)操作：

const more = document.querySelector('.more');
const less = document.querySelector('.less');
const content = document.querySelector('.content');
more.addEventListener('click', () =>{
content.style.display = "block";
more.style.display = "none";
less.style.display = "block";
});
less.addEventListener('click', () =>{
content.style.display = "none";
more.style.display = "block";
less.style.display = "none";
});

我們使用querySelector方法獲取展開(kāi)和收起操作的元素，以及需要展開(kāi)的內(nèi)容。然后，我們?yōu)閙ore和less元素分別添加click事件監(jiān)聽(tīng)器，用于切換展開(kāi)和收起狀態(tài)。

在事件函數(shù)中，我們分別改變content、more、less元素的display屬性，來(lái)控制展開(kāi)和收起的效果。這樣，當(dāng)用戶(hù)點(diǎn)擊“展開(kāi)”時(shí)，內(nèi)容區(qū)塊就會(huì)顯示出來(lái)；當(dāng)用戶(hù)點(diǎn)擊“收起”時(shí)，內(nèi)容區(qū)塊就會(huì)隱藏起來(lái)。

至此，我們就成功地實(shí)現(xiàn)了CSS展開(kāi)收起效果。將這個(gè)CSS效果應(yīng)用在你的網(wǎng)頁(yè)上，讓用戶(hù)體驗(yàn)更加舒適！