带有javaScript的响应式页面

Question

我有一个容器，当屏幕小于 1000px 时我想隐藏它。

css

.desktop-links { display: none; }

.active { display: block; }

.in-active { display: none; }

JavaScript：

const desktopLinks = document.querySelector('.desktop-links');

shareBtn.addEventListener('click', () => {
    if(window.innerWidth < 1000) {
        
        phoneLinks.classList.toggle('active');
        profile.classList.toggle('in-active');
    } else {
        desktopLinks.classList.toggle('active');
    }
});

错误：

当页面在桌面上加载时，如果我单击

shareBtn

并且窗口屏幕超过1000px，

desktopLinks

会按我的意图显示，但是如果我在

desktopLinks.style.display = "block"

时调整浏览器屏幕大小，那么我可以在移动设备尺寸中看到它或者，如果页面加载时屏幕尺寸为移动设备尺寸，并且如果我将其大小调整为全屏，并且我应该重新加载页面以便功能按我想要的方式工作，我该如何修复此错误？

我做了什么

我尝试使用 while 和 for 循环来修复该错误，但最终导致页面崩溃并在 if 语句中添加

desktopLinks.style.display = 'none'

但它不起作用。

Answer 1

您可以尝试处理调整大小事件而不是单击：

 window.addEventListener('resize', () => {
        if(window.innerWidth < 1000) {
            
            phoneLinks.classList.toggle('active');
            profile.classList.toggle('in-active');
        } else {
            desktopLinks.classList.toggle('active');
        }
    });