要?jiǎng)?chuàng)建交互式展開/收起組件，可使用HTML 的<details> 和<summary> 標(biāo)籤；1. <details> 作為容器包裹內(nèi)容，<summary> 作為可點(diǎn)擊標(biāo)題；2. 默認(rèn)情況下內(nèi)容折疊，添加open 屬性可默認(rèn)展開；3. 可通過CSS 自定義樣式，如隱藏默認(rèn)箭頭、設(shè)置背景色和過渡動(dòng)畫；4. 適用於FAQ、高級(jí)選項(xiàng)、折疊日誌等場(chǎng)景。

用HTML 的<details></details>和<summary></summary>標(biāo)籤創(chuàng)建交互式展開/收起組件其實(shí)挺直接的，不需要太多代碼就能實(shí)現(xiàn)一個(gè)默認(rèn)折疊、點(diǎn)擊可展開的內(nèi)容區(qū)域。這兩個(gè)標(biāo)籤配合使用，能快速做出類似“常見問題”、“高級(jí)選項(xiàng)”這類需要節(jié)省空間的UI 效果。

基本結(jié)構(gòu)： <details></details>包裹內(nèi)容， <summary></summary>作為標(biāo)題

<details></details>是整個(gè)組件的容器，而<summary></summary>是它的第一子元素，用來顯示可點(diǎn)擊的標(biāo)題。瀏覽器會(huì)自動(dòng)處理點(diǎn)擊行為和展開/收起的狀態(tài)切換，不需要額外JavaScript。

示例：

 <details>
  <summary>點(diǎn)擊展開更多信息</summary>
  <p>這裡是你想隱藏或展開的內(nèi)容。 </p>
</details>

• 默認(rèn)情況下，內(nèi)容是收起的。
• 點(diǎn)擊<summary>文字部分，內(nèi)容會(huì)展開或再次收起。
• 如果你想默認(rèn)展開，可以給<details>加上open屬性：

   <details open>
    <summary>默認(rèn)展開的信息</summary>
    <p>這段內(nèi)容一開始就是可見的。 </p>
  </details>

自定義樣式：別讓默認(rèn)樣式限制你

雖然默認(rèn)樣式已經(jīng)可用，但通常我們希望它更符合網(wǎng)站的整體風(fēng)格。你可以通過CSS 來美化<summary>和整個(gè)<details>組件。

一些常用樣式調(diào)整建議：

• 隱藏默認(rèn)的小箭頭（三角圖標(biāo)）：

   summary::-webkit-details-marker {
    display: none;
  }

• 設(shè)置自定義圖標(biāo)或背景色：

   summary {
    cursor: pointer;
    padding: 10px;
    background-color: #f0f0f0;
    border-radius: 4px;
    position: relative;
    padding-right: 30px;
  }
  
  summary::after {
    content: '?';
    position: absolute;
    right: 10px;
    font-size: 0.8em;
    transition: transform 0.2s;
  }
  
  details[open] summary::after {
    content: '▼';
  }

• 控制展開時(shí)的動(dòng)畫過渡：

   details > *:not(summary) {
    transition: max-height 0.3s ease-out;
    max-height: 200px; /* 根據(jù)內(nèi)容高度調(diào)整*/
    overflow: hidden;
  }

注意：不同瀏覽器對(duì)<details>支持略有差異，不過現(xiàn)代主流瀏覽器都支持了。

實(shí)際應(yīng)用場(chǎng)景：FAQ、設(shè)置面板、高級(jí)選項(xiàng)等

這個(gè)組合非常適合用於：

• 常見問題（FAQ） ：每個(gè)問題用一組<details> <summary>表示，用戶點(diǎn)擊即可查看答案。
• 高級(jí)設(shè)置面板：默認(rèn)隱藏高級(jí)選項(xiàng)，用戶點(diǎn)擊“顯示高級(jí)設(shè)置”後才展開。
• 折疊日誌或說明信息：比如在管理後臺(tái)裡，把調(diào)試信息藏起來，按需查看。

舉個(gè)FAQ 小例子：

 <details>
  <summary>什麼是HTML？ </summary>
  <p>HTML 是超文本標(biāo)記語言，用於構(gòu)建網(wǎng)頁(yè)的結(jié)構(gòu)。 </p>
</details>

<details>
  <summary>CSS 是什麼？ </summary>
  <p>CSS 是層疊樣式表，用來控製網(wǎng)頁(yè)的外觀和佈局。 </p>
</details>

基本上就這些。只要掌握基本結(jié)構(gòu)和樣式控制方法，就可以輕鬆做出實(shí)用的交互組件。

以上是如何使用HTML詳細(xì)信息和摘要標(biāo)籤創(chuàng)建交互式披露小部件？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！