JS метод DOMTokenList.toggle()

Загальний опис

toggle() є методом, який додає або видаляє токен з об'єкта DOMTokenList, що представляє список токенів, наприклад, список класів CSS елемента. Цей метод корисний для динамічного керування станом елементів на веб-сторінці без необхідності перевіряти, чи вже присутній токен у списку.

Метод toggle() може приймати один або два аргументи. Перший аргумент - це рядок, що представляє токен, який потрібно додати або видалити. Другий, необов'язковий аргумент - логічне значення, яке визначає, чи потрібно примусово додати або видалити токен, незалежно від його поточного стану.

Якщо передано лише один аргумент (токен), toggle() перевіряє, чи присутній цей токен у списку. Якщо токен присутній, він видаляється зі списку, інакше - додається. Наприклад:

const element = document.getElementById('myElement');
const classes = element.classList;

classes.toggle('active'); // Додає клас 'active', якщо його немає, або видаляє, якщо він є

Якщо передано два аргументи, логічне значення другого аргументу визначає, чи потрібно додати або видалити токен, незалежно від його поточного стану. Наприклад:

const element = document.getElementById('myElement');
const classes = element.classList;

classes.toggle('active', true); // Гарантовано додає клас 'active'
classes.toggle('active', false); // Гарантовано видаляє клас 'active'

Метод toggle() часто використовується для керування станами елементів інтерфейсу, наприклад, для реалізації розкривних меню, вкладок, модальних вікон тощо. Його зручно використовувати разом з подіями користувача, такими як клік або наведення курсору.

Наприклад, розглянемо реалізацію розкривного меню:

<nav>
  <button id="menuToggle">Меню</button>
  <ul id="menu" class="hidden">
    <li><a href="#">Пункт 1</a></li>
    <li><a href="#">Пункт 2</a></li>
    <li><a href="#">Пункт 3</a></li>
  </ul>
</nav>

const menuToggle = document.getElementById('menuToggle');
const menu = document.getElementById('menu');

menuToggle.addEventListener('click', function() {
  menu.classList.toggle('hidden');
});

У цьому прикладі ми використовуємо toggle('hidden') для показу або приховування меню при кліку на кнопку. Якщо клас hidden присутній в елементі menu, він видаляється, що робить меню видимим. Якщо класу hidden немає, він додається, приховуючи меню.

DOMTokenList.toggle() є зручним і гнучким методом для керування станами елементів на веб-сторінці. Він дозволяє уникнути складної логіки перевірки наявності токенів і забезпечує простий та ефективний спосіб маніпулювати класами CSS елементів.

правити

Порада

Якщо ви хочете гарантовано додати або видалити токен, незалежно від його поточного стану, використовуйте другий аргумент DOMTokenList.toggle(). Передайте true для додавання токену або false для його видалення. Це може бути корисним у ситуаціях, коли ви не хочете перевіряти наявність токену перед його додаванням або видаленням.

автор: Bond правити

Порада

Використовуйте DOMTokenList.toggle() разом з обробниками подій, такими як click, mouseover або keydown. Це дозволить вам створювати інтерактивні елементи інтерфейсу, які реагують на дії користувача, змінюючи свій стан. Наприклад, змінювати клас елемента при наведенні курсору миші.

автор: Bond правити

Порада

Пам'ятайте, що DOMTokenList.toggle() впливає лише на список токенів (класів CSS), але не на інші властивості елемента. Якщо вам потрібно змінити інші властивості, такі як стилі або атрибути, використовуйте відповідні методи або властивості об'єкта елемента.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

toggle(token)
toggle(token, force)

Параметри

token

Рядок, що представляє токен, який потрібно перемкнути.

автор: Bond

правити

force

Якщо включено, перетворює перемикання в однонапрямну операцію. Якщо встановлено на false, тоді токен буде лише видалено, але не додано. Якщо встановлено на true, тоді токен буде лише додано, але не видалено.

автор: Bond

правити

Повернення

boolean

Повертає логічне значення, true або false, що вказує, чи міститься токен у списку після виклику чи ні.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	8	3.6	5.1	≤12.1	12	10

Підтримка: мобільні переглядачі

Переглядач
	3	18	4	5

Приклади

+ запропонувати свій приклад у пісочниці

<div class="tabs">
  <div class="tab-headers">
    <button class="tab-header active" data-target="tab1">Вкладка 1</button>
    <button class="tab-header" data-target="tab2">Вкладка 2</button>
    <button class="tab-header" data-target="tab3">Вкладка 3</button>
  </div>
  <div class="tab-contents">
    <div class="tab-content active" id="tab1">Контент вкладки 1</div>
    <div class="tab-content" id="tab2">Контент вкладки 2</div>
    <div class="tab-content" id="tab3">Контент вкладки 3</div>
  </div>
</div>

<script>
const tabHeaders = document.querySelectorAll('.tab-header');

tabHeaders.forEach(function(header) {
  header.addEventListener('click', function() {
    const targetId = this.dataset.target;
    const targetContent = document.getElementById(targetId);

    // Видаляємо клас "active" з усіх заголовків та контентів
    tabHeaders.forEach(function(header) {
      header.classList.remove('active');
    });
    document.querySelectorAll('.tab-content').forEach(function(content) {
      content.classList.remove('active');
    });

    // Додаємо клас "active" до поточного заголовка та контенту
    this.classList.toggle('active', true);
    targetContent.classList.toggle('active', true);
  });
});
</script>

<nav>
  <button id="menuToggle">Меню</button>
  <ul id="menu" class="hidden">
    <li><a href="#">Пункт 1</a></li>
    <li><a href="#">Пункт 2</a></li>
    <li><a href="#">Пункт 3</a></li>
  </ul>
</nav>

<script>
const menuToggle = document.getElementById('menuToggle');
const menu = document.getElementById('menu');

menuToggle.addEventListener('click', function() {
  menu.classList.toggle('hidden');
});
</script>