使用事件处理程序更改基于媒体查询的 javascript 函数时出现问题

Question

对不起，如果这是一个基本问题。我主要从事设计工作，对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";
}
}
}

截至目前，单击导航菜单时我根本没有收到任何响应。谢谢，如果这是一个基本问题，很抱歉。

Answer 1

我认为您应该将解决方案转换为主要使用 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');
});