為什么我的側邊欄媒體查詢不能在Javascript中運行？

Question

我有一個側邊欄，使用桌面視圖上的javscript滑出250px。 說到移動視圖，我希望側邊欄占據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％ ，所以你寫的切換功能永遠不會奏效。