Javascript菜单与媒体查询切换

Question

如何从与媒体查询相关的元素中删除事件侦听器和类。我一直在摆弄这个，但似乎什么都不管用。它在moblie上运行良好，但当我重新调整屏幕大小使其变大时，"菜单显示"类仍然存在。

我该如何使用removeEventListener，它似乎对我不起作用。

function showMobileOptions(x) {
if (x.matches) { 
filters.forEach(filter => filter.addEventListener('click', function(){
filter.querySelector('.menu-list').classList.toggle("menu-show");
filter.querySelector('.menu-list').classList.toggle("toggle-close");
}))
} else {
//remove event listener + '.menu-show' from all items
filters.forEach(filter, function(){
filter.querySelector('.menu-list').classList.remove("menu-show");
filter.querySelector('.menu-list').classList.remove("toggle-close");
});
}
}
const x = window.matchMedia("(max-width: 768px)")
showMobileOptions(x)
x.addListener(showMobileOptions)

Answer 1

像这样使用

filter.removeEventListener('click');

最佳实践是创建一个功能，当你点击开火时，然后使用删除

filter.removeEventListener('click',myClickFunction);