有没有一种方法可以调整我的代码，防止我打开的子菜单调整大小

Question

codepen链接。

let widthMatch = window.matchMedia("(min-width: 1080px)");
let widthMatch2 = window.matchMedia("(max-width: 1080px)");
// mm in the function arg is the matchMedia object, passed back into the function
widthMatch.addEventListener('change', function(mm) {
if (mm.matches) {
// it matches the media query: that is, min-width is >= 1080px
if (burgerDivEle.classList.contains('on') && navUlEle.classList.contains('nav-active')) { //bigger than 1080p clean up classes, so the nav bar is in the original state.
nav.classList.remove("nav-active");
burger.classList.remove('on');
} else if (!burgerDivEle.classList.contains('on') && !navUlEle.classList.contains('nav-active'))
widthMatch2.addEventListener('change', function(mm) { //shrink it back down to 1080p, re-add it, only under the condition that we removed it first.
if (mm.matches) {
nav.classList.add("nav-active");
burger.classList.add('on');
}
});
}
});

当我没有点击汉堡时，当我将窗口调整为移动视图时，我想不出防止下拉菜单自动打开的逻辑。请记住，我的其他一切都很好。当我做大的时候它会关闭，如果你已经点击了汉堡，它会一直打开。

最好我想知道一个通过JavaScript快速修复的方法。我想知道这是否可行，而不必从头开始做一个新的。

Answer 1

我解决了自己的问题，添加一个占位符类非常简单。由于提示，还清理了嵌套的事件侦听器。

widthMatch.addEventListener('change', function(mm) {
if (mm.matches) {
// it matches the media query: that is, min-width is >= 1080px
if (burgerDivEle.classList.contains('on') && navUlEle.classList.contains('nav-active')) { //bigger than 1080p clean up classes, so the nav bar is in the original state.
nav.classList.remove("nav-active");
burger.classList.remove('on');
nav.classList.add('been-removed')
burger.classList.add('been-removed')
}
}
});
widthMatch2.addEventListener('change', function(mm) { //shrink it back down to 1080p, re-add it, only under the condition that we removed it first.
if (mm.matches) {
if (burgerDivEle.classList.contains('been-removed') && navUlEle.classList.contains('been-removed')) {
nav.classList.add("nav-active");
burger.classList.add('on');
nav.classList.remove("been-removed");
burger.classList.remove('been-removed');
}
}
});