Question

每当我单击汉堡包图标时，菜单就会打开，但是当我再次单击它时，菜单应该关闭了……但事实并非如此。我正在尝试调试，但我不知道出了什么问题。如果有人知道，请帮助

// Hamberger menu
const navSearch =  document.querySelector('.nav-search');
const navLeft = document.querySelector('.nav-left');
document.querySelector('.toggle').addEventListener('click', () => {
  console.log(navSearch.style.display);
  console.log('1');
  if(navSearch.style.display = "none") {
    console.log('2');
    navSearch.style.display = "inline-block";
    navLeft.style.display = "inline-block";
    console.log(navSearch.style.display);
  } else if(navSearch.style.display = "inline-block") {
    console.log('3');
    navSearch.style.display = "none";
    navLeft.style.display = "none";
  }
console.log('......');
});

// Variables
$website-width: 1280px;
$color-main: #4bbf73;
$color-dark: #343a40;
$color-light: #fff;
$color-lightx2: #f7f7f9;

//General Styles
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: $color-light;
  font-family: "Nunito", Arial, Helvetica, sans-serif;
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: $color-light;
}

ul {
  list-style: none;
}

h2,
h3,
h4 {
  text-transform: uppercase;
}

img {
  width: 100%;
}

input {
  border: none;
  padding: 0.7rem 1rem;
  background: $color-lightx2;

  &:focus {
    outline: none;
  }
}

// Utilities
.container {
  max-width: $website-width;
  padding: 0 1.5rem;
  margin: auto;
  overflow: hidden;
}

// navbar
header {
  background: $color-dark;
  height: 100px;

  #navbar {
    padding-top: 1.3rem;
    color: $color-light;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    .nav-logo {
      font-size: 1.5rem;
      font-weight: 900;
      letter-spacing: 2px;
      padding: 0.5rem 1rem;
    }

    ul {
      display: flex;
      justify-content: center;

      li {
        padding-left: 1.5rem;
      }
    }

    input[type="submit"] {
      margin-left: 0.4rem;
      background-color: inherit;
      border: $color-main 2px solid;
      color: $color-main;

      &:hover {
        background-color: $color-main;
        color: $color-light;
        transition: all 0.2s ease-in-out;
      }
    }

    input[type="text"] {
      padding: 0.7rem 1rem;
    }
  }

  .toggle {
    position: absolute;
    top: 2.2rem;
    right: 6rem;
    transform: scale(2);
    display: none;
  }
}

@import 'media';

@media (max-width: 850px) {
  header {
    height: auto;

    #navbar {
      flex-direction: column;
      align-items: start;

      input[type="text"] {
        margin: 1rem 0 1.4rem 3rem;
      }

      ul {
        padding-bottom: 1rem;
      }
    }

    .toggle {
      display: inline-block;
    }

    .nav-search,
    .nav-left {
      display: none;
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.0/css/all.css"
    integrity="sha384-OLYO0LymqQ+uHXELyx93kblK5YIS3B2ZfLGBmsJaUyor7CpMTBsahDHByqSuWW+q" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="scss/style.css">
  <title>AllMart</title>
</head>
<body>
  <header>
    <div class="container">
      <nav id="navbar">
        <div class="nav-logo">
          <a href="index.html">AllMart</a>
        </div>
        <div class="nav-search">
          <form>
            <input type="text" placeholder="Search Product...">
            <input type="submit" value="SEARCH">
          </form>
        </div>
        <div class="nav-left">
          <ul>
            <li id="cart"><a href="#"><i class="fas fa-shopping-cart"></i> CART</a></li>
            <li id="profile"><a href="#"><i class="fas fa-user"></i> SIGN IN</a></li>
          </ul>
        </div>
      </nav>
      <span class="toggle"><a href="#"><i class="fas fa-bars"></i></a></span>
    </div>
  </header>
  <script src="js/index.js"></script>
</body>
</html>

这是我单击该图标时得到的输出

我不知道如果有人知道怎么了，请帮忙

Answer 1

您需要在===语句中使用==或if，而不要使用=（这是赋值运算符）。首选===，因为它会测试严格的相等性（不进行类型转换）。

if(navSearch.style.display === "none")

else if(navSearch.style.display === "inline-block") {

当我单击时，汉堡菜单不会关闭

1 个答案: