切换到小屏幕时打开抽屉

Question

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

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

我试过这样使用 QuerySelector：

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

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

Answer 1

基于 link，科迪在评论中给出的，我明白了。

    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 时抽屉开始打开。我的第一个错误是我错过了 material.js 加载 defer，因此我找不到 mdl-layout__obfuscator 和 mdl-layout__drawer。像往常一样，愚蠢的错误使人痛苦……你知道那个地方:)

切换到小屏幕时打开抽屉

Make the Drawer open when switching to small screen

javascript

material-design-lite