Функция jQuery matchMedia запускается снова после прокрутки только на мобильном телефоне - PullRequest
Новая
       20

Функция jQuery matchMedia запускается снова после прокрутки только на мобильном телефоне

0 голосов
/ 02 января 2019

У меня есть функция, которая открывает или закрывает раскрывающийся фильтр в зависимости от размера экрана. На рабочем столе он открыт по умолчанию; на мобильном телефоне / планшете он должен быть закрыт (и открываться при нажатии). Функция проверяет размер экрана, а затем добавляет / удаляет класс «show», когда это применимо.

Функция открытия / закрытия управляется переключением данных в элементе:

<div class="filter-button-mobile d-md-block d-lg-none"><button value="button" type="button" href="#" class="filter-drop-mobile col-12" data-toggle="collapse" data-target="#filter-box">FILTER</button></div>

Это для сайта электронной коммерции, использующего фильтры стилей на странице сетки товаров. При использовании панели инструментов переключения устройств Chrome проблема НЕ возникает, только на реальном мобильном устройстве. 

$(document).ready(function () {
console.log($(window).width());
if (window.matchMedia('(min-width: 1020px)').matches) {
/* Changes when screen is over 720px  */
    $("#filter-box").addClass("show");
} else {
/* Changes when screen is under 720px */
    $("#filter-box").removeClass("show");
}
});
(function($) {
function mediaSize() { 
    if (window.matchMedia('(min-width: 1020px)').matches) {
    /* Changes when screen is over 720px  */
    $("#filter-box").addClass("show");
    } else {
    /* Changes when screen is under 720px */
    $("#filter-box").removeClass("show");
    }
};
mediaSize();
window.addEventListener('resize', mediaSize, false);  
})(jQuery);

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

...