0

Подскажите, пожалуйста, как на чистом JavaScript сделать замену изображения на кнопке открытия-закрытия меню.

Есть кнопка для открытия-закрытия меню. По умолчанию на ней есть исходное фоновое изображение. Необходимо, чтобы при открытии меню, изображение на кнопке подменялось на изображение крестика, а при закрытии, возвращалось исходное изображение.

Написал JS для тогла класса для скрытия и открытия меню, а также для смены исходного изображения на крестик, а как при закрытии меню вернуть исходное изображение на кнопку не знаю.

const menu = document.querySelector('.menu-bar');
const toggleMenuBtn = document.querySelector('.js-toggle-menu');

const changeBgImage = () => {
  toggleMenuBtn.style.backgroundImage = 'url(../images/icon-close.svg)';
};

const handleToggleMenuBtnClick = e => {
  menu.classList.toggle('show');
  changeBgImage();
};

toggleMenuBtn.addEventListener('click', handleToggleMenuBtnClick);
1
  • Сделайте добавление класса кнопке, в классе укажите фоновое изображение, а все остальное как у вас для .menu 30 мая 2020 в 13:54

1 ответ 1

1

const toggleMenuBtn = document.querySelector('.js-toggle-menu');

const handleToggleMenuBtnClick = e => toggleMenuBtn.classList.toggle('js-toggle-menu_show');

toggleMenuBtn.addEventListener('click', handleToggleMenuBtnClick);
.js-toggle-menu {
  width: 50px;
  height: 50px;
  background-image: url(https://img.icons8.com/ios-filled/100/000000/phone.png);
  background-size: contain;
}

.js-toggle-menu_show {
  background-image: url(https://img.icons8.com/ios/100/000000/phone.png);
}
<div class="js-toggle-menu"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.