matchMedia / Javascript 媒体查询问题

Question

我创建了这个函数来处理我的移动导航的切换。

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";
    }
  }   
};

它在移动设备上运行良好。问题是当我调整大小时，切换仍然设置为显示 none 并且切换的菜单选项不可见。我已尝试使用此 JS 媒体查询根据 786 像素的最小宽度重置显示块，但它没有重置菜单。

// 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";
 } 
}

这是一个 codepen 的问题。

Answer 1

你的代码因为这段代码不工作（注意注释）：

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";
  } 
}

查看我的fork of your pen.

matchMedia / Javascript 媒体查询问题

matchMedia / Javascript Media Query Issue

javascript

media-queries

matchmedia