В js новичок, углубляться в язык не буду, так что с этим туго.
Такое дело, есть форма поиска на сайте https://i.stack.imgur.com/WCZ6F.jpg, которую при максимальной ширине экрана 1199px убираю и вместо него ставлю кнопку мобильного поиска, при нажатии на которую появляется форма поиска https://i.stack.imgur.com/dIrjJ.jpg.
А проблема состоит в том, что после повторного нажатия на кнопку поиска когда пропадает форма, при уменьшении ширины экрана пропадает кнопка мобильного поиска, но форма не появляется https://i.stack.imgur.com/Cn9hr.jpg.
Вот js код:
let mobileSearch = document.getElementById('mobile-search');
let searchForm = document.getElementById('search-form');
let headerInput = document.getElementById('header__input');
let bannerBackground = document.getElementById('banner-background');
mobileSearch.addEventListener("click", function() {
if(searchForm.style.display == 'block') {
searchForm.style.display = 'none';
bannerBackground.classList.remove('banner-before');
}
else {
searchForm.style.display = 'block';
bannerBackground.classList.add('banner-before');
headerInput.focus();
}
});
И вот также как я "пытался" решить эту проблему:
let mobileSearch = document.getElementById('mobile-search');
let searchForm = document.getElementById('search-form');
let headerInput = document.getElementById('header__input');
let bannerBackground = document.getElementById('banner-background');
let x = window.matchMedia("(max-width: 1199px)");
function myMediaQuery(x) {
if (x.matches) {
mobileSearch.addEventListener("click", function() {
if(searchForm.style.display == 'block') {
searchForm.style.display = 'none';
bannerBackground.classList.remove('banner-before');
}
else {
searchForm.style.display = 'block';
bannerBackground.classList.add('banner-before');
headerInput.focus();
}
});
}
}
x.addListener(myMediaQuery);
Всем ответившим заранее спасибо.