切换到小屏幕时打开抽屉

Question

我尝试使用Material Design Lite并制作了一个小型界面。现在我面临一个问题 - 当窗口加载以及窗口从大屏幕变为小时，我需要使抽屉始终打开。 默认情况下，抽屉始终以关闭状态...

开始

当我点击抽屉按钮（屏幕截图上的粉红色）时，我发现有些变化。

我尝试使用QuerySelector：

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

但它无法检测到那个元素......有人可以更好地做出如此简单的任务吗？））我真的很喜欢它......

Answer 1

基于链接，Cody在评论中给出了，我明白了。

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

现在，当屏幕尺寸低于或等于1000px时，Drawer开始打开。我的第一个错误是我错过material.js加载了defer，因此我无法找到mdl-layout__obfuscator和mdl-layout__drawer。像往常一样，愚蠢的错误让你痛苦......你知道那个地方：）