Question

我正在建立一个练习项目，单击“ x”时，响应式导航菜单会关闭（隐藏）。不幸的是，当屏幕扩展时，导航菜单仍处于隐藏状态。我正在尝试在JS代码中使用媒体查询来检测屏幕何时达到1000px，以便可以“取消隐藏”导航栏。

简而言之，我要寻找的代码是：

如果单击了按钮{ 隐藏标题 } 无论按钮是否被点击{ 当屏幕尺寸达到1000像素时再次显示（取消隐藏）标题 }

相关的HTML

<header>
    <!-- responsive navigation -->
    <nav>
      <h1 class="nav-title">News Source</h1>
      <div class="menu-toggle-container">
        <div class="hamburger-icon"></div>
      </div>
        <div class="responsive-nav-menu">
          <div class="close-menu-container">
            <div class="close-menu"></div>
          </div>
          <ul class="nav-list" id="nav-list">
            <li class="list"><a class="home" href="#top-stories">Top-Stories</a></li>
            <li class=" list"><a class="business" href="#business">Business</a></li>
            <li class=" list"><a class="entertainment" href="#entertainment">Entertainment</a></li>
            <li class=" list"><a class="health" href="#health">Health</a></li>
            <li class=" list"><a class="science" href="#science">Science</a></li>
            <li class=" list"><a class="sports" href="#sports">Sports</a></li>
            <li class=" list"><a class="technology" href="#technology">Technology</a></li>
          </ul>
        </div>
    </nav>
  </header>

相关CSS

这是我用来隐藏菜单的课程

.hide {
  max-height: 0;
  overflow: hidden;
}

这是一个隐藏的导航菜单，我想在屏幕达到1000像素时显示

.responsive-nav-menu {  /* menu that opens upon hamburger click */
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.8);
  width: 100vw;
  height: 100vh;
  text-align: center;
  display: none;
}

与媒体查询相同的类

@media only screen and (min-width: 1000px) {

   .responsive-nav-menu {  
    display: block;
    position: static;
    background-color: white;
    height: auto;
    width: auto;
    text-align: right;
  }

}

相关JS

const menu = document.getElementsByClassName('responsive-nav-menu');
const mq1 = window.matchMedia('screen and (min-width: 1000px)');

此功能可在屏幕低于1000像素时关闭菜单

function closeNavMenu() {
  menuClose[0].addEventListener('click', function () {
      menu[0].classList.add('hide');
    });
}

这是我试图让代码检测屏幕尺寸并从菜单中删除类hide的功能。

function widthChange() {
  if (mq1.matches) {
    menu[0].classList.remove('hide');
  }
}

我什至尝试使用计时功能来查看程序是否可以那种方式检测屏幕尺寸。

setTimeout('widthChange()', 1000);

任何帮助都会很棒。预先感谢。

Javascript代码中的媒体查询出现问题

0 个答案: