Форма поиска пропадает при уменьшении широты экрана
В js новичок, углубляться в язык не буду, так что с этим туго.
Такое дело, есть форма поиска на сайте https://imgur.com/a/MZ4engv, которую при максимальной ширине экрана 1199px убираю и вместо него ставлю кнопку мобильного поиска, при нажатии на которую появляется форма поиска https://imgur.com/a/Kid9GnK.
А проблема состоит в том, что после повторного нажатия на кнопку поиска когда пропадает форма, при уменьшении ширины экрана пропадает кнопка мобильного поиска, но форма не появляется https://imgur.com/a/CeXY8nl.
Вот 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);
Всем ответившим заранее спасибо.
Ответы (1 шт):
Автор решения: Albert
→ Ссылка
В итоге все решилось, двумя функциями:
function showForm(){ if(x.matches) searchForm.style.display = 'block' }
function hideForm(){ if(f.matches) searchForm.style.display = 'none' }
let x = window.matchMedia("(min-width: 1199px)");
showForm();
x.addListener(showForm);
let f = window.matchMedia("(max-width: 1199px)");
hideForm();
f.addListener(hideForm);