[英]Javascript Menu toggle with Media Queries
如何从与媒体查询相关的元素中删除事件侦听器和类。 我一直在摆弄这个,但是似乎没有任何效果。 在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)
这样使用
filter.removeEventListener('click');
最佳做法是为点击触发时要执行的操作创建一个函数,然后使用删除
filter.removeEventListener('click',myClickFunction);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.