切換內容的不同（現代）方式

掌握現代網頁內容切換技巧：告別display: none！

工欲善其事，必先利其器。

——亞伯拉罕·馬斯洛

習慣使用熟悉的工具很容易。對於內容切換，你可能習慣使用display: none或opacity: 0，並輔以一些JavaScript代碼。但如今的網頁技術更加現代化，是時候全面了解各種內容切換方法了：哪些原生API得到支持，它們的優缺點是什麼，以及你可能不知道的一些細節（例如偽元素和其他不明顯的內容）。

讓我們一起探討一下<details></details>和<summary></summary>元素、Dialog API、Popover API等等。我們將根據你的需求，探討何時使用每種方法。模態還是非模態？ JavaScript還是純HTML/CSS？別擔心，我們將一一講解。

<details></details>和<summary></summary>元素

應用場景：以易於訪問的方式總結內容，同時允許獨立或作為手風琴式組件切換內容細節。

2024年12月12日更新：Chrome博客上的一篇新文章展示了使用<details></details>的幾種更有趣的方法，包括動畫圖庫和部分打開的<details></details>（可以選擇使用calc-size進行動畫處理）。

按照發布順序，<details></details>和<summary></summary>元素標誌著我們第一次能夠在不使用JavaScript或奇特的複選框技巧的情況下切換內容。但缺乏瀏覽器支持顯然會阻礙新功能的普及，特別是這個功能最初缺乏鍵盤可訪問性。如果你從2011年Chrome 12版本發布以來就沒有使用過它，我能夠理解。眼不見心不煩，對吧？

以下是重點：

• 無需JavaScript即可正常工作（沒有任何妥協）。
• 無需appearance: none等屬性即可完全進行樣式設置。
• 你可以隱藏標記而無需使用非標準偽選擇器。
• 你可以連接多個<details></details>元素來創建一個手風琴式組件。
• 而且……從2024年開始，它完全可以進行動畫處理。

<details></details>元素的標記

你需要的是：

<details><summary>内容摘要（始终可见）</summary>
  内容（单击摘要时切换可见性）
</details>

在後台，內容被包裝在一個偽元素中，從2024年開始，我們可以使用::details-content選擇它。此外，還有一個::marker偽元素指示<details></details>是打開還是關閉，我們可以自定義它。

考慮到這一點，<details></details>在後台實際上是這樣的：

<details><summary>内容摘要（始终可见）</summary>
  内容（单击摘要时切换可见性）
</details>

要使<details></details>默認打開，請為<details></details>添加open屬性，這與<details></details>打開時後台發生的情況相同。

<details><summary><::marker></::marker>内容摘要（始终可见）</summary><::details-content>
      内容（单击摘要时切换可见性）
  </::details-content></details>

<details></details>元素的樣式設置

說實話：你可能只想去掉那個煩人的標記。你可以通過將<summary></summary>的display屬性設置為除list-item以外的任何值來實現：

<details open=""> ... </details>

或者，你可以修改標記。事實上，下面的示例使用了Font Awesome將其替換為另一個圖標，但請記住::marker不支持許多屬性。最靈活的解決方法是用一個元素包裝<summary></summary>的內容，然後在CSS中選擇它。

summary {
  display: block; /* 或任何其他非 list-item 的值 */
}

<details><summary>内容摘要</summary>
  内容
</details>

使用多個<details></details>元素創建手風琴式組件

要創建手風琴式組件，請使用name屬性為多個<details></details>元素命名，並使用匹配的值（類似於實現單選按鈕的方式）：

details {

  /* 标记 */
  summary::marker {
    content: "\f150";
    font-family: "Font Awesome 6 Free";
  }

  /* <details>打开时的标记 */
  &[open] summary::marker {
    content: "\f151";
  }

  /* 因为 ::marker 不支持许多属性 */
  summary span {
    margin-left: 1ch;
    display: inline-block;
  }

}</details>

使用一個包裝器，我們甚至可以將它們變成水平選項卡：

<details name="starWars" open=""><summary>前传</summary><ul>
<li>第一集：幽灵的威胁</li>
    <li>第二集：克隆人的进攻</li>
    <li>第三集：西斯的复仇</li>
  </ul></details><details name="starWars"><summary>原版</summary><ul>
<li>第四集：新希望</li>
    <li>第五集：帝国反击战</li>
    <li>第六集：绝地归来</li>
  </ul></details><details name="starWars"><summary>续集</summary><ul>
<li>第七集：原力觉醒</li>
    <li>第八集：最后的绝地武士</li>
    <li>第九集：天行者的崛起</li>
  </ul></details>

<div>
  <details name="starWars" open=""> ... </details><details name="starWars"> ... </details><details name="starWars"> ... </details>
</div>

……或者，使用2024年的Anchor Positioning API，創建垂直選項卡（相同的HTML）：

div {
  gap: 1ch;
  display: flex;
  position: relative;

  details {
    min-height: 106px; /* 防止内容偏移 */

    &[open] summary,
    &[open]::details-content {
      background: #eee;
    }

    &[open]::details-content {
      left: 0;
      position: absolute;
    }
  }
}

如果你想了解一下我們如何使用CSS中的Popover API，可以查看John Rhea的文章，他在文章中僅僅使用<details></details>元素就製作了一個互動遊戲！

添加JavaScript功能

想要添加一些JavaScript功能？

div {

  display: inline-grid;
  anchor-name: --wrapper;

  details[open] {

    summary,
    &::details-content {
      background: #eee;
    }

    &::details-content {
      position: absolute;
      position-anchor: --wrapper;
      top: anchor(top);
      left: anchor(right);
    }
  }
}

創建可訪問的<details></details>元素

只要遵循一些規則，<details></details>元素就是可訪問的。例如，<summary></summary>基本上是一個<label></label>，這意味著當它獲得焦點時，屏幕閱讀器會宣布其內容。如果沒有<summary></summary>或<summary></summary>不是<details></details>的直接子元素，則用戶代理會為你創建一個標籤，通常在視覺上和輔助技術中都顯示為“Details”。較舊的瀏覽器可能堅持要求它是第一個子元素，因此最好將其設置為第一個子元素。

此外，<summary></summary>具有按鈕的角色，因此在<button></button>中無效的內容在<summary></summary>中也是無效的。這包括標題，因此你可以將<summary></summary>的樣式設置為標題，但你不能實際將標題插入<summary></summary>中。

剩餘內容因篇幅限制，無法全部翻譯。請提供其他部分，我將盡力翻譯。

以上是切換內容的不同（現代）方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！