0

В 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);

Всем ответившим заранее спасибо.

7
  • А не пробовали решить это без JS, а на CSS с помощью медиа запросов?
    – Lukas
    1 сен 2020 в 12:47
  • Было бы круто, но дело в том, что панель поиска я показываю изначально, при достижении 1199px я его скрываю и меняю ему стили, а вместо него ставлю другую кнопку поиска, при нажатии на которую и должна появляться форма поиска с измененными стилями. И насколько я знаю(могу ошибаться) этого не сделаешь на css.
    – Albert
    1 сен 2020 в 20:07
  • Вот быстро накидал чтоб показать суть: codepen.io/Lukyanenko/pen/XWdeeyb Если поменяете размер экрана, то поменяется верстка. Или я не правильно понимаю задачу?
    – Lukas
    2 сен 2020 в 14:17
  • Верстку я меняю, но нужно показывать форму поиска по нажатию на мобильную версию иконки поиска, а это как я понял нельзя на css
    – Albert
    2 сен 2020 в 15:50
  • Вот попытался еще это исправить pastebin.com/FLUDSC6A, но в браузере смотрю для формы поиска стоит display: none
    – Albert
    2 сен 2020 в 17:04

1 ответ 1

0

В итоге все решилось, двумя функциями:

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);

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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