Utwórz wyłączny akordeon z wieloma elementami <details> o tym samym identyfikatorze name.
Akordeon
Typowym wzorcem interfejsu w internecie jest komponent akordeonu. Ten komponent składa się z kilku widżetów dotyczących komunikatów, które pojedynczo można rozwinąć (lub zwinąć), aby wyświetlić (lub ukryć) treść.
Aby zastosować ten wzorzec w internecie, należy połączyć kilka elementów <details> i zwykle grupować je wizualnie, aby pokazać, że należą do siebie.
Wyjątkowy akordeon
Obsługa przeglądarek
- 120
- 120
- x
- 17.2
Odmianą wzoru akordeonu jest akordeon na wyłączność, w którym można jednocześnie otwierać tylko jeden widżet komunikatu.
Aby osiągnąć ten cel w internecie, możesz teraz dodać do elementów <details> atrybut name. Gdy używasz tego atrybutu, wiele elementów <details> o tej samej wartości name tworzy grupę semantyczną, która będzie działać jak akordeon wyłączny. Gdy otworzysz jeden z elementów <details> z grupy, wcześniej otwarty element zostanie automatycznie zamknięty.
<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>
Strona może mieć wiele akordeonów wyłącznych. Za każdym razem, gdy użyjesz nowej wartości name w elemencie <details>, tworzona jest nowa grupa logiczna.
Pamiętaj, że elementy <details>, które wchodzą w skład akordeonu wyłącznego, nie muszą być równorzędne. Mogą być rozproszone po całym dokumencie. Grupuje je atrybut name, a nie kolejność DOM.
Wypełniaj akordeon na wyłączność
Poniższy kod JavaScript umożliwia polyfill na podstawie działania akordeonu wykluczającego. Kod opiera się na zdarzeniu toggle elementu <details>.
Gdy otwiera się element <details> z atrybutem name, kod znajduje pozostałe otwarte elementy <details> z tą samą wartością atrybutu name i je zamyka.
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");
}
});
}
});
});
Niektóre starsze wersje przeglądarek nie uruchamiają tego zdarzenia toggle. W tych przeglądarkach kod polyfill nie zadziała. Jeśli chodzi o stopniowe ulepszanie, jest to dozwolone.