javascript - 为什么我的 CSS 导航切换按钮不起作用？

Question

我试图为平板电脑/手机制作一个切换按钮，但它不起作用。当我单击切换按钮时，会调用 javascript 类，所以我不知道出了什么问题...

我使用 defer 函数加载我的 js 以避免将它放在身体的末尾

<script defer src="assets/js/index.js"></script>

const navToggle = document.querySelector(".nav-toggle");
const navMenu = document.querySelector(".nav-menu");

navToggle.addEventListener("click", () => {
  navMenu.classList.toggle("nav-menu_visible");
});

/*my toggle button propertys on desktops*/

.header .nav .nav-toggle {
  color: white;
  background: none;
  border: none;
  font-size: 1.875em;
  padding: 0 1.250em;
  line-height: 60px;
  cursor: pointer;
  display: none;
}


/*for phones*/

@media (max-width: 1024px) {
  .header .nav .nav-toggle {
    display: block;
  }
  .header .nav .nav-menu {
    flex-direction: column;
    align-items: center;
    background-color: #2c3e50;
    position: fixed;
    left: 0;
    top: 60px;
    width: 100%;
    height: calc(100vh - 60px);
    /*100%*/
    overflow-y: auto;
    padding: 1.250em 0;
    left: 100%;
    transition: left 0.3s;
  }
  .nav-menu_visible {
    left: 0;
  }
}

<header class="header">
  <nav class="nav">
    <a href="#" class="logo">Portafolio</a>
    <button class="nav-toggle">
            <i class="fas fa-bars"></i>
        </button>
    <ul class="nav-menu">
      <li class="nav-menu-item"><a href="#header" class="nav-menu-link">Inicio</a></li>
      <li class="nav-menu-item"><a href="#about" class="nav-menu-link">Sobre Mí</a></li>
      <li class="nav-menu-item"><a href="#skills" class="nav-menu-link">Habilidades</a></li>
      <li class="nav-menu-item"><a href="#knowledge" class="nav-menu-link">Conocimientos</a></li>
      <li class="nav-menu-item"><a href="#works" class="nav-menu-link">Proyectos</a></li>
      <li class="nav-menu-item"><a href="#contact" class="nav-menu-link">Contacto</a></li>
    </ul>
  </nav>
</header>

我不知道为什么我的菜单没有从左 0 移动到左 100%（它没有显示：/）

标签： javascripthtmlcss

Answer 1

由于CSS，它不起作用。您的特殊性比nav-menu您声明的要多得多。

.header .nav .nav-menu    // 0 3 0

(xyx) => (id, class, tag)

要么增加特异性，.nav-menu_visible要么降低特异性.nav-menu

1)将特异性降低到0 1 0as

.nav-menu                // 0 1 0

const navToggle = document.querySelector(".nav-toggle");
const navMenu = document.querySelector(".nav-menu");

navToggle.addEventListener("click", () => {
  navMenu.classList.toggle("nav-menu_visible");
});

body {
  background-color: black;
}

.header .nav .nav-toggle {
  color: white;
  background: none;
  border: none;
  font-size: 1.875em;
  padding: 0 1.250em;
  line-height: 60px;
  cursor: pointer;
  display: none;
}


/*for phones*/

@media (max-width: 1024px) {
  .header .nav .nav-toggle {
    display: block;
  }
  .nav-menu {
    flex-direction: column;
    align-items: center;
    background-color: #2c3e50;
    position: fixed;
    left: 0;
    top: 60px;
    width: 100%;
    height: calc(100vh - 60px);
    /*100%*/
    overflow-y: auto;
    padding: 1.250em 0;
    left: 100%;
    transition: left 0.3s;
  }
  .nav-menu_visible {
    left: 0;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>



<header class="header">
  <nav class="nav">
    <a href="#" class="logo">Portafolio</a>
    <button class="nav-toggle">
          <i class="fas fa-bars"></i>
        </button>
    <ul class="nav-menu">
      <li class="nav-menu-item"><a href="#header" class="nav-menu-link">Inicio</a></li>
      <li class="nav-menu-item"><a href="#about" class="nav-menu-link">Sobre Mí</a></li>
      <li class="nav-menu-item"><a href="#skills" class="nav-menu-link">Habilidades</a></li>
      <li class="nav-menu-item"><a href="#knowledge" class="nav-menu-link">Conocimientos</a></li>
      <li class="nav-menu-item"><a href="#works" class="nav-menu-link">Proyectos</a></li>
      <li class="nav-menu-item"><a href="#contact" class="nav-menu-link">Contacto</a></li>
    </ul>
  </nav>
</header>

2）您还可以增加与nav-menuas匹配的特异性

.header .nav .nav-menu_visible {   // 0 3 0

const navToggle = document.querySelector(".nav-toggle");
const navMenu = document.querySelector(".nav-menu");

navToggle.addEventListener("click", () => {
  navMenu.classList.toggle("nav-menu_visible");
});

body {
  background-color: black;
}

.header .nav .nav-toggle {
  color: white;
  background: none;
  border: none;
  font-size: 1.875em;
  padding: 0 1.250em;
  line-height: 60px;
  cursor: pointer;
  display: none;
}


/*for phones*/

@media (max-width: 1024px) {
  .header .nav .nav-toggle {
    display: block;
  }
  .header .nav .nav-menu {
    flex-direction: column;
    align-items: center;
    background-color: #2c3e50;
    position: fixed;
    left: 0;
    top: 60px;
    width: 100%;
    height: calc(100vh - 60px);
    /*100%*/
    overflow-y: auto;
    padding: 1.250em 0;
    left: 100%;
    transition: left 0.3s;
  }
  .header .nav .nav-menu_visible {
    left: 0;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
<header class="header">

  <nav class="nav">
    <a href="#" class="logo">Portafolio</a>
    <button class="nav-toggle">
          <i class="fas fa-bars"></i>
        </button>
    <ul class="nav-menu">
      <li class="nav-menu-item"><a href="#header" class="nav-menu-link">Inicio</a></li>
      <li class="nav-menu-item"><a href="#about" class="nav-menu-link">Sobre Mí</a></li>
      <li class="nav-menu-item"><a href="#skills" class="nav-menu-link">Habilidades</a></li>
      <li class="nav-menu-item"><a href="#knowledge" class="nav-menu-link">Conocimientos</a></li>
      <li class="nav-menu-item"><a href="#works" class="nav-menu-link">Proyectos</a></li>
      <li class="nav-menu-item"><a href="#contact" class="nav-menu-link">Contacto</a></li>
    </ul>
  </nav>
</header>