JavaScript - прослушиватель событий с window.matchMedia не запускается - PullRequest
0 голосов
/ 12 ноября 2018

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

Теперь я хочу, чтобы мой слушатель, когда окно сократилось, показал кнопку и скрыл панель навигации.Когда окно развернуто, кнопка должна быть скрыта, и должна отображаться панель навигации.Кнопка работает, как и должно быть, так как медиа-запрос не влияет на нее.Мой слушатель, кажется, вообще не запускается, за исключением случаев, когда страница перезагружается.

Мой сценарий содержится внутри заголовка PHP, который находится в начале всех моих страниц.Вот что у меня есть:

Слушатель медиазапроса (содержится в коде header.php)

// ... navbar code, opening script tag, yadda yadda
function mediaQueryCheck(inputQuery) {
    var content = document.getElementById("navigation");
    if (inputQuery.matches) {
        // it matches
        content.style.display = "none";
    } else {
        // it does not match
        content.style.display = "block";
    }
}
var mobileQuery = window.matchMedia("screen and (max-width: 638px)");
mediaQueryCheck(mobileQuery);
mobileQuery.addEventListener(mediaQueryCheck);
// closing script tag

Элемент #navigation является элементом div, содержащимПанель навигации.При необходимости я предоставлю любой другой соответствующий код.

Ответы [ 2 ]

0 голосов
/ 13 ноября 2018

Использование addListener вместо addEventListener решило проблему.

0 голосов
/ 12 ноября 2018

Вы должны проверять это каждый раз, когда размер окна изменяется.

window.addEventListener('resize', function(){
  mediaQueryCheck(mobileQuery);
});
...