如何根据屏幕宽度在Javascript中添加/删除类？

Question

我有两个不同的菜单，一个用于移动版本，另一个用于PC版本。 但是移动版菜单阻止了PC版菜单。 如何解决呢？

在媒体查询中更改屏幕宽度时，我已经尝试删除移动版菜单，但这不起作用。 在我尝试用Javascript添加/删除类之后，但它们仅适用于移动版本的菜单，不适用于PC版本的菜单。

window.onload = function() {
 overlay();
};

function overlay() {
  let nav = document.getElementById("nav");
  if (document.body.style.width < "991px") {
    nav.classList.add("overlay");
  } else {
    nav.classList.remove("overlay");
  }
};

我希望与不同的菜单没有冲突，但是PC版本的菜单与移动版本的菜单不同。 而且我在控制台中没有错误消息。

Answer 1

仅当且仅当您明确设置正文的大小时， document.body.style.width才起作用。 您可能需要使用screen.width （如果希望它用于调整大小的窗口，则可以使用window.innerWidth ），然后进行比较。

示例（便于剪切和粘贴）：

    window.onload = function() {
     overlay();
    };

    function overlay() {
      let nav = document.getElementById("nav");
      if (window.innerWidth < 991) {
        nav.classList.add("overlay");
      } else {
        nav.classList.remove("overlay");
      }
    };

链接

• MDN文档screen.width
• 适用于window.innerWidth的MDN文档

Answer 2

答案就在那里。 谢谢大家XD。

 onload = function() { toggleMenus(); } window.onresize = function() { toggleMenus(); } function toggleMenus() { var width = window.innerWidth; console.log(width); if(width < 767) { //mobile $(".mobile-menu").show(); $(".desktop-menu").hide(); } else { //desktop $(".mobile-menu").hide(); $(".desktop-menu").show(); } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="mobile-menu"> Some mobile menu comtent </div> <div class="desktop-menu"> Some desktop menu content </div> 

Answer 3

function foo() {
   console.log(screen.width, screen.height)
}

window.addEventListener('resize', foo)

然后您可以删除错误的类并添加正确的类

Answer 4

有多种方法可以实现此目的：

1- CSS媒体查询：

 /*Mobile*/ @media(max-width: 767px) { .mobile-menu { display: block; } .desktop-menu { display: none; } } /*Desktop*/ @media(min-width: 767px) { .mobile-menu { display: none; } .desktop-menu { display: block; } } 

 <div class="mobile-menu"> Some mobile menu comtent </div> <div class="desktop-menu"> Some desktop menu content </div> 

2- Javascript：

在javascript中，您可以使用window.innerWidth来获取窗口的宽度，然后相应地显示/隐藏div。 调整窗口大小时，请不要忘记也执行更改：

 onload = function() { toggleMenus(); } window.onresize = function() { toggleMenus(); } function toggleMenus() { var width = window.innerWidth; console.log(width); if(width < 767) { //mobile $(".mobile-menu").show(); $(".desktop-menu").hide(); } else { //desktop $(".mobile-menu").hide(); $(".desktop-menu").show(); } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="mobile-menu"> Some mobile menu comtent </div> <div class="desktop-menu"> Some desktop menu content </div> 

3-引导程序4：

如果您不想实现自己的逻辑，仍然可以使用Bootstrap 4类根据屏幕大小显示/隐藏div。 对于您想要的，可以使用：

带d-md-none d-block可在桌面上隐藏div并在移动设备上显示

d-sm-none与d-xs-none和d-md-block一起在移动设备上隐藏div并在桌面上显示。

<div class="mobile-menu d-md-none">
  Some mobile menu content
</div>

<div class="desktop-menu d-sm-none d-xs-none d-md-block">
  Some desktop menu content
</div>