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);

带有媒体查询的Javascript菜单切换

1 个答案: