切换内容的不同（现代）方式

掌握现代网页内容切换技巧：告别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中文网其他相关文章！