切换小屏时打开抽屉答案

【问题标题】：Make the Drawer open when switching to small screen切换小屏时打开抽屉
【发布时间】：2016-05-30 13:57:43
【问题描述】：

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

当我点击抽屉按钮（屏幕截图为粉红色）时，我发现发生了一些变化。

我尝试像这样使用 QuerySelector：

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

但它无法检测到该元素...有人能给我更好的方法来完成如此简单的任务吗？））我真的很喜欢它...

【问题讨论】：

您可以检测窗口加载和调整大小事件并触发打开抽屉，如stackoverflow.com/questions/31536467/…中所述
谢谢，终于知道如何让它工作了...：/

标签： javascript material-design-lite

【解决方案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');
        };
    };

所以现在当屏幕尺寸低于或等于 1000 像素时，抽屉开始打开。我的第一个错误是我错过了material.js 加载了defer，因此我找不到mdl-layout__obfuscator 和mdl-layout__drawer。像往常一样，愚蠢的错误使人痛苦......你知道那个地方:)

【讨论】：