Czy wiesz, że istnieje natywne rozwiązanie HTML5 do bardzo łatwego tworzenia akordeonowego przycisku czytaj więcej/mniej do ukrywania i ujawniania treści za pomocą BEZ JavaScript i CSS. Czytaj dalej, aby dowiedzieć się, jak.
Połączenia i Tagi HTML5 są oficjalnie element widżetu ujawniania, Ale sparowane z Tagi HTML5 zapewnią Ci czysty akordeon tylko w HTML.
Znaczenie brak JS LUB CSS jest potrzebne. Jakie to jest świetne!
Oto przykład pokazujący prosty element z a i .
Oto kod:
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>a oto jak to będzie wyglądać:
Czytaj więcej
Jest to natywny akordeon HTML5 do ukrywania i ujawniania treści. Całkiem fajnie, prawda?
Jak to działa? Połączenia tag służy jako opakowanie na element, który można otwierać lub zamykać. Użytkownik musi kliknąć etykietę, która jest tag, aby otworzyć lub zamknąć element.
A co ze stylem i zachowaniem?
style
Możesz zastosować styl CSS, aby dostosować wygląd odsłoniętego pola tekstowego. Poniżej przedstawiono styl interfejsu z zakładkami:
details {
font: 16px "Open Sans", Calibri, sans-serif;
width: 620px;
}
details > summary {
padding: 2px 6px;
width: 15em;
background-color: #ddd;
border: none;
box-shadow: 3px 3px 4px black;
cursor: pointer;
}
details > p {
border-radius: 0 0 10px 10px;
background-color: #ddd;
padding: 2px 6px;
margin: 0;
box-shadow: 3px 3px 4px black;
}
details[open] > summary {
background-color: #ccf;
}Domyślnie kursor wygląda jak strzałka, ale jeśli chcesz, aby był wskazując ręką zamiast tego użyj tego:
details {
cursor: pointer;
}Zachowania
Ustawienie zachowań jest bardzo ograniczone, tak naprawdę jest tylko jedna rzecz, którą możesz zrobić, a jest nią ujawniony tekst otwarte domyślnie.
Aby uruchomić akordeon w stanie otwartym, dodaj Boolean koncepcja atrybut do etykietka:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>Czytaj więcej
Jest to natywny akordeon HTML5 do ukrywania i ujawniania treści. Całkiem fajnie, prawda?
Jakich atrybutów mogę używać?
Poniższe atrybuty mogą być użyte dla etykietka:
| Atrybut | wartość | Podsumowanie |
|---|---|---|
| koncepcja | koncepcja | Domyślnie jest zamknięte. |
| id | wartość | Zapewnia unikalny identyfikator. |
| klasa | nazwy klas | Przypisuje nazwy klas do elementu. |
| styl | Wartości CSS | Przypisuje style CSS do elementu. |
Jakie są ograniczenia? Zawsze jest jakiś haczyk, prawda?
Brak wsparcia dla Internet Explorera
Ten akordeon obsługujący tylko język HTML5 nie będzie działał w żadnej wersji przeglądarki Internet Explorer. Jeśli musisz mieć obsługę IE11, będziesz musiał użyć innego rozwiązania awaryjnego przy użyciu JQuery. Wszystkie inne przeglądarki obsługują i .
Brak niestandardowych animacji i przejść
Chociaż możesz modyfikować i stylizować wygląd (jak pokazano powyżej), nie będziesz w stanie wykonać żadnych animacji ani przejść odsłaniających tekst. Jeśli chcesz to zrobić, potrzebujesz innego rozwiązania akordeonowego CSS/JSS.
Czytniki ekranu i ułatwienia dostępu
To jest rodzime HTML5 i *powinna* być dostępna, ale okazało się, że faktycznie ujawniony tekst nie zawsze jest poprawnie odczytywany przez czytnik ekranu.
Referencje: