创建一个包含具有相同 name
的多个 <details>
元素的独占手风琴。
手风琴
网络上常见的界面模式是手风琴式折叠组件。这是一个由多个披露声明 widget 组成的组件,这些 widget 可以分别展开(或收起)以显示(或隐藏)其内容。
如需在网页上实现此模式,您需要组合一些 <details>
元素,通常在视觉上将它们分组,以表明它们属于一起。
独家手风琴
浏览器支持
- 120
- 120
- x
- 17.2
手风琴式折叠模式的一种变体是独占手风琴,在这种模式中,一次只能打开一个披露声明 widget。
为了在 Web 上实现这一点,您现在可以向 <details>
元素中添加 name
属性。使用此属性时,具有相同 name
值的多个 <details>
元素会形成语义组,并且这些元素的行为方式就像排他性的手风琴。当您打开组中的某个 <details>
元素时,之前打开的那个元素将自动关闭。
<details name="learn-css">
<summary>Welcome to Learn CSS!</summary>
<p>…</p>
</details>
<details name="learn-css">
<summary>Box Model</summary>
<p>…</p>
</details>
<details name="learn-css">
<summary>Selectors</summary>
<p>…</p>
</details>
一个网页中可以有多个独占手风琴。每当对 <details>
元素使用新的 name
值时,系统都会创建一个新的逻辑组。
请注意,独占手风琴中的 <details>
元素不一定是同级。它们可能分散在文档中。对它们进行分组的是 name
属性,而不是它们的 DOM 顺序。
Polyfill 专用手风琴
通过以下 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}][open]`)
.forEach(($openDetails) => {
if (!($openDetails === $details)) {
$openDetails.removeAttribute("open");
}
});
}
});
});
某些旧版浏览器不会触发此 toggle
事件。在这些浏览器中,polyfill 代码不会执行任何操作。就渐进式增强而言,这是可接受的行为。