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

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

基本結構： <details></details>包裹內容， <summary></summary>作為標題

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

示例：

 <details>
  <summary>點擊展開更多信息</summary>
  <p>這裡是你想隱藏或展開的內容。 </p>
</details>

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

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

自定義樣式：別讓默認樣式限制你

雖然默認樣式已經可用，但通常我們希望它更符合網站的整體風格。你可以通過CSS 來美化<summary>和整個<details>組件。

一些常用樣式調整建議：

• 隱藏默認的小箭頭（三角圖標）：

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

• 設置自定義圖標或背景色：

   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: '▼';
  }

• 控制展開時的動畫過渡：

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

注意：不同瀏覽器對<details>支持略有差異，不過現代主流瀏覽器都支持了。

實際應用場景：FAQ、設置面板、高級選項等

這個組合非常適合用於：

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

舉個FAQ 小例子：

 <details>
  <summary>什麼是HTML？ </summary>
  <p>HTML 是超文本標記語言，用於構建網頁的結構。 </p>
</details>

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

基本上就這些。只要掌握基本結構和樣式控制方法，就可以輕鬆做出實用的交互組件。

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