Сделать ящик открытым при переключении на маленький экран

Question

Я пытаюсь использовать Material Design Lite и сделал небольшой интерфейс. И теперь я сталкиваюсь с проблемой - мне нужно сделать ящик всегда открытым, когда окно загружается и когда окно переходит с большого экрана на маленький. По умолчанию ящик всегда начинается с состояния закрытия ...

Я обнаружил, что некоторые изменения приходят, когда я нажимаю кнопку Ящика (розовый цвет на снимке экрана).

Я пытался использовать QuerySelector так:

var obfuscator = document.querySelector('.mdl-layout__obfuscator'); 
obfuscator.className = 'mdl-layout__obfuscator is-visible' 

но не может обнаружить этот элемент ... Может кто-то дайте мне лучший способ сделать такую ​​простую задачу)) Я действительно сгруппирован с ним ...

Answer 1

Основано на ссылке, которую Коди дал в комментарии, я получил это.

window.onload = function() { 
     var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0) 
     if (w <= 1000) { 
      document.querySelector('.mdl-layout__obfuscator').classList.add('is-visible'); 
      document.querySelector('.mdl-layout__drawer').classList.add('is-visible'); 
     }; 
    }; 

Итак, теперь начало ящика открывается при размере экрана ниже или равном 1000 пикселей. Моя первая ошибка заключалась в том, что я пропустил то, что material.js загружается с defer, и из-за этого я не могу найти mdl-layout__obfuscator и mdl-layout__drawer. Как всегда, глупые ошибки причиняли боль ... u знаете это место :)