为什么我的侧边栏媒体查询不能在 Javascript 中工作？

Question

我有一个侧边栏，可以在桌面视图上使用 javscript 滑出 250 像素。当谈到移动视图时，我希望侧边栏占据 100% 的宽度。我正在尝试在 Javascript 中使用媒体查询，但无论我做了什么更改，它似乎都会覆盖我在桌面视图上的侧边栏的样式。

HTML

 <nav class="navbar">
  <div id="toggle-btn" class="sidemenu-btn">
    <i class="fas fa-bars"></i>
  </div>
  <div id="toggle-nav" class="navbar-items animated fadeInLeft delay-1s">
    <a href="#home">Home</a>
    <a href="#about-me">About</a>
    <a href="#my-skills">Skills</a>
    <a href="#my-portfolio">Portfolio</a>
    <a href="#contact-me">Contact</a>
  </div>
</nav>

CSS

 .navbar {
      height: 100%;
      width: 0;
      position: fixed;
      background: #141313;
    }

    .navbar .sidemenu-btn {
     font-size: 2.5rem;
     padding: 3rem 0;
     text-align: center;
     margin-left: 1rem;
     cursor: pointer;
     color: #141313;
    }

    .navbar .navbar-items {
    display: flex;
    flex-direction: column;
    text-align: center;
    display: none;
    margin-left: 1rem;
    }

   .navbar .navbar-items a {
    text-decoration: none;
    color: white;
    padding: 1.2rem 0;
    font-weight: 400;
    font-size: 1.2rem;
    text-transform: uppercase;
    }

   .navbar .navbar-items a:hover {
    text-decoration: line-through;
   }

@media screen and (max-width: 768px) {

.navbar {
  position: relative;
}


}

JS

const toggleBtn = document.querySelector("#toggle-btn");
const toggleNav = document.querySelector(".navbar");
const togglenavItems = document.querySelector('.navbar-items');

toggleBtn.addEventListener("click", sideMenu);
toggleBtn.addEventListener("click", mediaQuery);


    function sideMenu() {
  if (toggleNav.style.width === "250px") {
    toggleNav.style.width = "0px";
  } else {
    toggleNav.style.width = "250px";
  }

}



function mediaQuery() {
  const x = window.matchMedia('(max-width: 768px)');
  const y = document.querySelector('.navbar');

  if (x.matches && y.style.width === "100%") {
    y.style.width = "0px";

  } else {
    y.style.width = "100%";

  }



}

Answer 1

媒体查询可以完成这项工作。你不需要 js 来改变navbar-items 的宽度。看到这个

const toggleBtn = document.querySelector("#toggle-btn");
const toggleNav = document.querySelector(".navbar");
const togglenavItems = document.querySelector('.navbar-items');

toggleBtn.addEventListener("click", sideMenu);

function sideMenu() {
  toggleNav.classList.toggle('open');
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.navbar {
    height: 100%;
    width: 100%;
    position: fixed;

  }

  .sidemenu-btn {
     font-size: 2.5rem;
     padding: 0;
     text-align: center;
     cursor: pointer;
     color: green;
     position: absolute;
     right: 20px;
     top: 20px;
  }

  .navbar-items {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 250px;
    height: 100%;
    padding-left: 1rem;
    background: #141313;
    transition: all .5s ease;
  }

 .navbar .navbar-items a {
    text-decoration: none;
    color: white;
    padding: 1.2rem 0;
    font-weight: 400;
    font-size: 1.2rem;
    text-transform: uppercase;
  }

 .navbar .navbar-items a:hover {
  text-decoration: line-through;
 }


@media (max-width: 768px) {
  .navbar-items {
    width: 100%;
  }
}

.navbar.open .navbar-items {
  width: 0;
}

<nav class="navbar">
  <div id="toggle-btn" class="sidemenu-btn">
    <i class="fas fa-bars"></i>
    Toggle
  </div>
  <div id="toggle-nav" class="navbar-items animated fadeInLeft delay-1s">
    <a href="#home">Home</a>
    <a href="#about-me">About</a>
    <a href="#my-skills">Skills</a>
    <a href="#my-portfolio">Portfolio</a>
    <a href="#contact-me">Contact</a>
  </div>
</nav>

只需添加媒体查询就可以改变元素的宽度，无需在js中签入

@media (max-width: 768px) {
 .navbar-items {
   width: 100%;
 }
}

添加一个.open 类，该类将添加到.navbar 并触发转换

.navbar.open .navbar-items {
  width: 0;
}

您的 js 现已简化

const toggleBtn = document.querySelector("#toggle-btn");
const toggleNav = document.querySelector(".navbar");

toggleBtn.addEventListener("click", sideMenu);

function sideMenu() {
  toggleNav.classList.toggle('open');
}

Answer 2

使用 CSS 更容易控制它在移动/桌面上的外观，而 JS 只处理逻辑。以下将修复样式差异，并使您的 JS 更易于导航。

CSS

 .navbar{
   width: 250px;
   height: 100%;
   position: fixed;
   background: #141313;
 }     
 .navHidden{
  width: 0px !important;
 }
 /* smaller screen size */
 @media screen and (max-width:768px) {
   .navbar{
     width: 100%;
   }
 }

HTML

<nav class="navbar navHidden">

JS

function sideMenu() {
  toggleNav.classList.toggle("navHidden")
}

旁注

在您包含的代码中，单击切换按钮会将导航栏的宽度设置为 250px，但随后它将传递给您的下一个函数，然后将其交换到 100% 在 EVERY CASE 中，无论屏幕大小如何，因此您编写的切换功能将永远无法工作。