切換到小屏幕時打開抽屜

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時，便開始打開抽屜。 我的第一個錯誤是我錯過了material.js加載了defer ，因此我找不到mdl-layout__obfuscator和mdl-layout__drawer 。 像往常一樣，愚蠢的錯誤使我感到痛苦……你知道那個地方:)