Как менять изображение на кнопке открытия-закрытия меню?
Подскажите, пожалуйста, как на чистом 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 шт):
Автор решения: Денис Степанов
→ Ссылка
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>