HTML展開收縮代碼是一種很實用的功能，它可以讓網(wǎng)頁上的代碼看起來更加整潔，同時也便于用戶查看所需部分的代碼。下面我們來詳細(xì)了解一下如何實現(xiàn)這種功能。 首先，我們需要使用HTML中的pre標(biāo)簽來展示代碼。pre標(biāo)簽可以保留代碼中的所有空格和換行，使其呈現(xiàn)出與源代碼一致的格式。 接著，我們需要使用JavaScript來實現(xiàn)展開收縮的效果。具體來說，我們可以通過添加CSS類來控制代碼的顯示和隱藏。代碼部分會被包含在一個div標(biāo)簽內(nèi)，并且給這個div標(biāo)簽一個特定的id，例如“code”。然后，我們可以使用以下JavaScript代碼來切換類： `var code = document.getElementById("code");` `if (code.className == "open")` `{` ` code.className = "closed";` `}` `else` `{` ` code.className = "open";` `}` 在上述代碼中，我們通過檢查類名來判斷代碼當(dāng)前的狀態(tài)，如果是“open”，則將其切換為“closed”，如果是“closed”，則將其切換為“open”。然后，我們可以定義CSS類“open”和“closed”來控制代碼的狀態(tài)。例如，當(dāng)類為“open”時，代碼應(yīng)該展開，而當(dāng)類為“closed”時，代碼應(yīng)該收縮。 `#code.open pre` `{` ` display: block;` `}` `#code.closed pre` `{` ` display: none;` `}` 上述CSS代碼會控制包含在id為“code”的div標(biāo)簽內(nèi)的pre標(biāo)簽的顯示和隱藏。當(dāng)類為“open”時，pre標(biāo)簽將顯示出來，而當(dāng)類為“closed”時，pre標(biāo)簽將被隱藏起來。 最后，我們只需要添加一個 HTML 元素，當(dāng)用戶點(diǎn)擊該元素時，即可觸發(fā)上述JavaScript代碼的執(zhí)行，實現(xiàn)展開收縮的效果。例如： `Show Code` 上述HTML代碼會創(chuàng)建一個超鏈接元素，“Show Code”，當(dāng)用戶點(diǎn)擊該鏈接時，即可觸發(fā)JavaScript函數(shù)“toggleCode”的執(zhí)行，從而實現(xiàn)展開收縮的效果。 綜上所述，HTML展開收縮代碼是一種非常實用的功能，可以使網(wǎng)頁上的代碼更加整潔，同時也方便用戶查看所需部分的代碼。我們可以使用HTML中的pre標(biāo)簽來展示代碼，通過JavaScript實現(xiàn)展開收縮的效果，從而讓網(wǎng)頁更加美觀和易于使用。