CSS友情鏈接折疊是一種非常實(shí)用的技術(shù)，可以幫助網(wǎng)站將過多的鏈接隱藏起來，以節(jié)省頁面空間，提高用戶的瀏覽體驗(yàn)。以下是使用CSS實(shí)現(xiàn)友情鏈接折疊的方法：

.collapsible {
cursor: pointer;
position: relative;
display: block;
padding: 0;
margin: 0;
outline: none;
border: none;
background-color: transparent;
}
.collapsible::before {
content: '+';
font-size: 25px;
font-weight: bold;
position: absolute;
top: -10px;
right: 0;
}
.active::before {
content: '-';
}
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.active .content {
max-height: 10000px;
transition: max-height 0.5s ease-in;
}

以上代碼中，我們定義了一個(gè)名為“collapsible”的類，它具有以下特點(diǎn)：

• 鼠標(biāo)變成手型，用戶可點(diǎn)擊
• 不帶邊框或背景色，以便融入頁面
• 有個(gè)小加號(hào)在每個(gè)可折疊元素的右側(cè)，標(biāo)志尚未展開
• 將.max-height設(shè)置為0，將.content元素隱藏起來
• 帶有過渡效果的最大高度，以實(shí)現(xiàn)平滑的展開/折疊操作

要使用此代碼實(shí)現(xiàn)友情鏈接的折疊，請(qǐng)按照以下步驟進(jìn)行：

1. 在HTML中放置帶有“collapsible”類的按鈕元素，以及包裹友情鏈接的div元素，將其標(biāo)記為“內(nèi)容”。
2. 在CSS中定義.content元素中包含的鏈接的樣式，使它們可見并按您想要的方式排列。
3. 在JavaScript中創(chuàng)建事件偵聽器，以便在用戶單擊按鈕時(shí)切換該按鈕的類，并使.content元素的最大高度動(dòng)態(tài)設(shè)置為其原始的“自動(dòng)”高度或0（即消息））也許是隨著時(shí)間的推移逐漸減小或增加）。

如此一來，友情鏈接就能夠被折疊和展開了，提高網(wǎng)站的整體交互性和簡(jiǎn)潔性。