Функция изменения javascript на основе медиа-запроса с обработчиком событий - PullRequest
Новая
       31

Функция изменения javascript на основе медиа-запроса с обработчиком событий

0 голосов
/ 27 мая 2020

Извините, если это основной c вопрос. В основном я работаю с дизайном, и мне не очень нравится JavaScript.

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

Вот код, насколько я пробовал в него 

// media query event handler
if (matchMedia) {
const mq = window.matchMedia("(min-width: 500px)");
mq.addListener(WidthChange);
WidthChange(mq);
}

// media query change
function WidthChange(mq) {
if (mq.matches) {
// at least 500px
document.getElementById("onclick").addEventListener("click", menuSize);

 function menuSize() {
document.getElementById("mobilemenu").style.height = "35%";
document.getElementById("mobilemenu").style.opacity = "1";
document.getElementById("movbilenav").style.opacity = "0";

}

} else {
// less than 500px
document.getElementById("onclick").addEventListener("click", menusizeL);

 function menusizeL() {
document.getElementById("mobilemenu").style.height = "50%";
document.getElementById("mobilemenu").style.opacity = "1";
document.getElementById("movbilenav").style.opacity = "0";

}
}

}

По состоянию на теперь я вообще не получаю ответа при нажатии на меню навигации. Спасибо, и извините, если это элементарный вопрос.

1 Ответ

0 голосов
/ 27 мая 2020

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

Вы можете просто добавить медиа-запрос в свои таблицы стилей для обработки перепады высот. Чтобы скрыть / показать ваше меню, я бы просто добавил класс через ваш js. Пример таблицы стилей: 

#mobilemenu {
    height: 50%;
    opacity: 0;
}
#mobilmenu.showing {
    opacity: 1;
}
@media (min-width: 500px) {
    #mobilemenu {
        height: 35%;
    }
}

Затем вы можете просто добавить свой класс через js: 

document.getElementById('menuopener').addEventListener('click', function() {
    document.getElementById('mobilemenu').classList.toggle('showing');
});
...