Проблема с медиа-запросами внутри кода Javascript - PullRequest
Новая
       11

Проблема с медиа-запросами внутри кода Javascript

0 голосов
/ 03 сентября 2018

Я строю учебный проект, в котором адаптивное навигационное меню закрывается (скрывается) при нажатии кнопки «x». К сожалению, когда экран расширяется, навигационное меню все еще скрыто. Я пытаюсь использовать медиа-запросы в своем коде JS, чтобы определить, когда экран достигает 1000 пикселей, чтобы я мог "показать" навигационную панель.

На простом английском языке я ищу код, который нужно сделать:

Если нажата кнопка { скрыть заголовок } независимо от того, была ли нажата кнопка или нет { когда размер экрана достигает 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;
}

это навигационное меню, которое скрыто и которое я хочу отобразить, когда экран достигнет 1000px 

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

Это функция, которая закрывает меню, когда экран ниже 1000px 

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

Любая помощь будет отличной. Заранее спасибо.

...