Utwórz niepowtarzalny akordeon z kilkoma elementami <details>
o tej samej wartości name
.
Akordeon
Powszechnym wzorcem interfejsu użytkownika w internecie jest komponent akordeonu. Jest to komponent składający się z kilku widżetów z komunikatami, które można rozwijać (lub zwijać), aby odsłonić (lub ukryć) treść.
Aby wdrożyć ten wzorzec w internecie, należy połączyć kilka elementów <details>
i zwykle grupować je wizualnie, aby wskazać, że należą do siebie.
Wyjątkowy akordeon
Obsługa przeglądarek
- 120
- 120
- x
- 17.2
Odmianą wzorca jest akordeon, w którym w tym samym czasie można otworzyć tylko jeden widżet z powiadomieniem.
Aby to zrobić w przeglądarce, możesz teraz dodać atrybut name
do elementów <details>
. Gdy używasz tego atrybutu, wiele elementów <details>
o tej samej wartości name
tworzy grupę semantyczną, która działa jak wyłączny akordeon. Gdy otworzysz 1 z elementów <details>
z grupy, poprzedni 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. Użycie nowej wartości name
w elemencie <details>
powoduje utworzenie nowej grupy logicznej.
Pamiętaj, że elementy <details>
, które są częścią wyłącznej akordeonu, nie muszą być elementami równorzędnymi. Mogą być rozrzucone w całym dokumencie. Grupuje je atrybut name
, a nie kolejność DOM.
Wyjątkowy akordeon Polyfill
Za pomocą poniższego kodu JavaScript można polyfill zachowanie wyłącznego akordeonu. Kod korzysta ze zdarzenia toggle
elementu <details>
.
Po otwarciu elementu <details>
z elementem 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 takich przeglądarkach kod polyfill nic nie daje. W przypadku progresywnego ulepszania jest to zachowanie akceptowalne.