Toggle: создание более удобного и интерактивного опыта для пользователей

Toggle – это метод, который позволяет изменять состояние элемента при каждом нажатии на него. К примеру, может быть использован для открытия и закрытия меню на сайте или для переключения темной/светлой темы на странице.

В JavaScript toggle можно вызвать для элемента, у которого есть стили CSS. Для этого нужно получить элемент из документа и вызвать на нем метод toggle(). Например:

HTML:

Меню

CSS:

#main-menu {
  display: none;
}

JavaScript:

const menuBtn = document.getElementById('menu-btn');
const mainMenu = document.getElementById('main-menu');
menuBtn.addEventListener('click', function() {
  mainMenu.classList.toggle('active');
});

В данном примере класс "active" используется для показа/скрытия меню при помощи CSS. При каждом клике на кнопке "Меню" будет происходить переключение класса "active" у элемента "main-menu".

Еще один пример использования toggle – переключение класса на элементах в DOM. Например, в HTML может быть следующий список:

  
Пункт 1
  
Пункт 2
  
Пункт 3
  
Пункт 4

JavaScript:

const items = document.querySelectorAll('.item');
items.forEach(item => {
   item.addEventListener('click', function() {
     item.classList.toggle('active');
   });
});

В данном случае при клике на любой пункт списка будет происходить переключение класса "active". Если он отсутствует – будет добавлен, если есть – будет удален.

Таким образом, toggle является полезным методом, позволяющим осуществлять переключение между двумя состояниями для элементов в DOM. Он может использоваться во многих ситуациях, когда нужно произвести быстрое изменение внешнего вида элементов или управлять их состоянием.