JS властивість Event.toggle
Загальний опис
Подія toggle виникає, коли елемент <details> змінює свій стан — відкривається або закривається. Це дозволяє відслідковувати, чи розгорнутий або згорнутий елемент <details>, і відповідно до цього виконувати різні дії, наприклад, динамічно змінювати інтерфейс користувача або завантажувати додатковий контент.
Для прослуховування події toggle потрібно використовувати метод addEventListener для елемента <details>. Наприклад:
const details = document.querySelector('details');
details.addEventListener('toggle', (event) => {
if (details.open) {
console.log('Елемент відкрито');
} else {
console.log('Елемент закрито');
}
});
У цьому прикладі, коли користувач відкриває або закриває елемент <details>, подія toggle буде викликатися. Властивість open повертає true, якщо елемент відкритий, і false, якщо він закритий. Це дає змогу створювати більш інтерактивні розділи на сторінці, де користувач може самостійно вирішувати, чи бачити додаткову інформацію або ховати її.
Подія toggle є унікальною для елемента <details> і не спрацьовує на інших типах елементів. Це робить її ідеальним вибором для створення динамічних елементів на сторінках, які можуть відкриватися і закриватися без додаткового JavaScript-коду для управління видимістю.
Наприклад, можна використовувати подію toggle для завантаження або видалення даних, коли користувач відкриває або закриває елемент, що може зменшити кількість завантажених ресурсів на початку завантаження сторінки. У деяких випадках подія може бути корисною для аналітики, коли важливо знати, які елементи інтерфейсу були відкриті або закриті користувачем.
Подія не спрацьовує, якщо ви програмно встановлюєте значення властивості open, але її можна використовувати разом із програмним керуванням станом, що робить її універсальним інструментом для створення взаємодіючих компонентів.
| Порада: | Якщо потрібно виконувати різні дії при відкритті та закритті елемента, можна перевіряти властивість |
| Порада: | Подія |
| Порада: | Можна використовувати подію |
Синтаксис
element.addEventListener('toggle', function(event) {
// Ваш код
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
У цьому прикладі користувач взаємодіє з елементом <details>, який містить приховану інформацію. Подія toggle відслідковує, коли елемент відкрито або закрито, і оновлює текст статусу на сторінці. Крім того, кнопка "Відкрити/Закрити" дозволяє користувачеві вручну змінювати стан елемента.
У цьому прикладі при відкритті елемента <details> ми завантажуємо додатковий контент через асинхронний запит, що дозволяє оптимізувати початкове завантаження сторінки. При закритті елемента контент очищується.
const details = document.querySelector('details');
const content = document.querySelector('#extra-content');
details.addEventListener('toggle', async () => {
if (details.open) {
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
const data = await response.json();
content.innerText = `Завантажений контент: ${data.title}`;
} else {
content.innerText = '';
}
});Цей приклад дозволяє зберігати стан відкритого елемента <details> у локальному сховищі браузера, що дозволяє після перезавантаження сторінки автоматично відновлювати стан елемента. Це корисно для зручності користувача, якщо потрібно зберігати інтерфейс у тому вигляді, в якому він залишився перед закриттям сторінки.
const details = document.querySelector('details');
details.addEventListener('toggle', () => {
localStorage.setItem('detailsOpen', details.open);
});
// Відновлення стану після перезавантаження сторінки
if (localStorage.getItem('detailsOpen') === 'true') {
details.open = true;
}