Почему слушатель событий заставляет мой sidenav открываться сам, когда я изменяю размер окна? - PullRequest
Новая
       61

Почему слушатель событий заставляет мой sidenav открываться сам, когда я изменяю размер окна?

0 голосов
/ 22 декабря 2019

я сделал отзывчивый javascript sidenav с помощью window.matchMedia, но он работает только при перезагрузке страницы. 

function openNav() {
    
  document.getElementById("mySidenav").style.width = "26.0869%";
  document.getElementById("main").style.marginLeft = "26.0869%";
}

function closeNav() {

  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
}

if (window.matchMedia("(max-aspect-ratio: 3/4)").matches) {
   
   function openNav() {
  document.getElementById("mySidenav").style.width = "70%";
  document.getElementById("main").style.marginLeft = "70%";
}

}

Итак, я добавил это к своему коду, чтобы он сразу работал, когда я изменяю размер окна. Это работает, но теперь sidenav открывается сам по себе, когда я изменяю размер окна 

(function (window, document, undefined) {
  
  

  // Initialize the media query
  var mediaQuery = window.matchMedia('(max-aspect-ratio: 3/4)');
  
  // Add a listen event
  mediaQuery.addListener(openNav);

  
  // Function to do something with the media query
  function openNav(mediaQuery) {    
    if (mediaQuery.matches) {
      document.getElementById("mySidenav").style.width = "70%";
  document.getElementById("main").style.marginLeft = "70%";
    } else {
      document.getElementById("mySidenav").style.width = "26.0869%";
  document.getElementById("main").style.marginLeft = "26.0869%";
    }
  }
  
  // On load
  
  closeNav();

  // Modernizr
  //window.addEventListener('resize', function() {
  //  if (Modernizr.mq('(min-width: 560px)')) {
  //    document.body.style.backgroundColor = 'CornflowerBlue';
  //  } else {
  //    document.body.style.backgroundColor = 'FireBrick';
  //  }
  //}, false);
  
})(window, document);
...