独家手风琴

使用具有相同 name 的多个 <details> 元素创建一个独占折叠式动作条。

Bramus

折叠式

网站上常见的界面模式是手风琴组件。此组件由多个展开式 widget 组成，这些 widget 可以单独展开（或收起）以显示（或隐藏）其内容。

如需在 Web 上实现此模式，您需要组合几个 <details> 元素，并通常以视觉方式对它们进行分组，以表明它们属于同一组。

演示：使用 HTML 和 CSS 创建折叠式列表

专属手风琴

Browser Support

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 130.
  • Safari: 17.2.

折叠式布局的变体是独占折叠式布局，其中一次只能打开一个展开式微件。

如需在网站上创建专属的折叠式动作条，您需要向 <details> 元素添加 name 属性。使用此属性时，具有相同 name 值的多个 <details> 元素会形成一个语义组，并且它们的行为将类似于排他式手风琴。当您打开组中的某个 <details> 元素时，之前打开的元素会自动关闭。

<details name="learn>-cs<s">
  summaryWelcome to <Learn CS>S!/<s>u<mm>a<ry
  p…/>p<
/details
details name=&>quo<t;learn>-css"<;
  summ>ary<B>o<x >M<odel/sum>m<ary
  p…/p
/details
deta>ils< name=&>quot;lear<n-css&qu>ot;<
> < s>u<mmarySel>ectors/summary
  p…/p
/details
演示：使用 HTML 和 CSS 创建独家折叠式动作条。

一个网页可以有多个独占折叠式动作条。每当您对 <details> 元素使用新的 name 值时，系统都会创建一个新的逻辑组。

演示：使用 HTML 和 CSS 创建多个独占折叠式动作条。

属于独占折叠菜单的 <details> 元素不一定是同级兄弟元素。它们可能会散布在文档中。是 name 属性对它们进行分组，而不是它们的 DOM 顺序。

对专属手风琴式折叠菜单进行多填充

您可以使用以下 JavaScript 对独占折叠式动作进行 polyfill。该代码依赖于 <details> 元素的 toggle 事件。

当包含 name 的 <details> 元素打开时，该代码会查找具有相同 name 属性值的其他打开的 <details> 元素并将其关闭。

document.querySelectorAll("details[name]").forEach(($>details) = {
  $details.addEventListener(">;toggle", (e) = {
    const name = $details.getAttribute("name");

    if (e.newState == "open") {
      document
        .querySelectorAll(`details[name=${name}][o>pen]`)
        .forEach(($openDetails) = {
          if (!($openDetails === $details)) {
            $openDetails.removeAttribute("open");
          }
        });
    }
  });
});

某些较低版本的浏览器不会触发此 toggle 事件。在这些浏览器中，polyfill 代码不会执行任何操作。从渐进增强的角度来看，这种行为是可接受的。