matchMedia/Javascript媒体查询问题

我创建此函数是为了处理移动导航的切换

const mobileNav = document.getElementById('mobile-nav');
let tabs = document.getElementsByClassName('nav_tabs');

//nav toggle control
mobileNav.onclick = (event) => {
 event.preventDefault();
  for(let i = 0; i < tabs.length; i++) {
    if(tabs[i].style.display === "block"){
      tabs[i].style.display = "none";
    } else {
      tabs[i].style.display = "block";
    }
  }   
};

const mobileNav=document.getElementById（'mobile-nav'）；
让tabs=document.getElementsByClassName（'nav_tabs'）；
//导航切换控制
mobileNav.onclick=（事件）=>{
event.preventDefault（）；
for（设i=0；i

它在手机上运行得非常好。问题是，当我调整大小时，切换仍然设置为“无显示”，并且切换的菜单选项不可见。我尝试过使用这个JS媒体查询来重置显示块（基于786px的最小宽度），但它没有重置菜单

// media query event handler
if (matchMedia) {
const dsktp = window.matchMedia("(min-width: 768px)");
dsktp.addListener(WidthChange);
WidthChange(dsktp);
}

function WidthChange(elem) {
 for(let i = 0; i < elem.length; i++) {
  tabs[i].style.display = "block";
 } 
}

//媒体查询事件处理程序
如果（匹配媒体）{
const dsktp=window.matchMedia（（最小宽度：768px））；
dsktp.addListener（宽度更改）；
宽度变化（dsktp）；
}
函数宽度更改（elem）{
for（设i=0；i

---

以下是问题的原因。

由于此代码，您的代码无法工作（请注意注释）：

if（匹配媒体）{
const dsktp=window.matchMedia（（最小宽度：768px））；
dsktp.addListener（WidthChange）；//这样可以完全纠正较大尺寸的显示，但它也给了我一个相反的问题，即在mobile上默认打开菜单。默认行为应该是在mobile上不显示（小于786）在任何更大的地方显示块…@TYPOI哦，我没有注意到它。我现在修复了它，更新了答案和钢笔，请检查。@TYPOI现在检查，请检查。这是你需要的吗？是的，谢谢你，米哈伊尔！！！太好了！如果我理解你所做的事情-默认宽度更改设置为false，媒体查询使用t匹配宽度ernary-block表示真，none表示假……不客气！我已经对我的笔进行了一些重构，并减少了代码量。这是最终版本。
if (matchMedia) {
  const dsktp = window.matchMedia("(min-width: 768px)");
  dsktp.addListener(WidthChange); // <-- add function as handler
  WidthChange(dsktp);
}

function WidthChange(elem) { // elem argument it is not the dom elements here
  for(let i = 0; i < elem.length; i++) {
    tabs[i].style.display = "block";
  } 
}

if (matchMedia) {
  const dsktp = window.matchMedia("(min-width: 768px)");
  dsktp.addListener(WidthChange);
  WidthChange(dsktp);
}

function WidthChange(mediaQueryEvent) {
  for(let i = 0; i < tabs.length; i++) {
    tabs[i].style.display = mediaQueryEvent.matches ? "block" : "none";
  } 
}