在網頁開發中，有時候我們需要為長篇內容開發點開收起的效果，以便提升用戶體驗。CSS提供了這樣的實現方法，下面就為大家介紹一下。 首先，我們需要一個包含長篇內容的容器，例如下面的HTML結構： ```

這是一段很長的內容，需要點開收起效果來提升用戶體驗。

``` 接下來，我們需要設置收起的效果樣式，代碼如下： ``` .content { height: 80px; // 設置容器高度為80px，超出則隱藏 overflow: hidden; // 將超出的內容隱藏 } ``` 然后，我們需要添加一個“點開”按鈕，這里使用了CSS中的偽元素before實現： ``` .content:before { content: "+"; // 內容為“+”表示展開狀態 font-size: 20px; // 設置字體大小為20px color: #555; // 設置字體顏色為#555 float: right; // 將“點開”按鈕靠右對齊 cursor: pointer; // 設置鼠標樣式為手型 } ``` 最后，我們需要添加一個點擊事件，將展開和收起兩種狀態進行切換： ``` .content.collapsed { height: auto; // 設置高度為自動，即展開狀態 } .content.collapsed:before { content: "-"; // 內容為“-”表示收起狀態 } document.querySelector('.content').addEventListener('click', function() { this.classList.toggle('collapsed'); // 切換展開和收起狀態 }); ``` 至此，我們實現了一個簡單的點開收起效果，完整代碼如下： ```

這是一段很長的內容，需要點開收起效果來提升用戶體驗。

``` ``` .content { height: 80px; overflow: hidden; } .content:before { content: "+"; font-size: 20px; color: #555; float: right; cursor: pointer; } .content.collapsed { height: auto; } .content.collapsed:before { content: "-"; } document.querySelector('.content').addEventListener('click', function() { this.classList.toggle('collapsed'); }); ``` 總的來說，點開收起效果雖然實現起來較為簡單，但卻可以提升用戶體驗，是前端開發中常用的技巧之一。