当我点击时，汉堡菜单没有关闭

Question

Whenever I click on the hamburger icon the menu opens but when I click on it again it is supposed to get closed... But it's not.每当我单击汉堡包图标时，菜单就会打开，但是当我再次单击它时，它应该会关闭……但事实并非如此。 I am trying to debug but I have no idea what is going wrong.我正在尝试调试，但我不知道出了什么问题。 If anyone knows, please help如果有人知道，请帮忙

 // 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>

and this is the output I get whenever I click on the icon这是我每次点击图标时得到的输出

I have no idea what is going wrong if anyone knows, please help我不知道出了什么问题，如果有人知道，请帮忙

Answer 1

You need to use === or == in if statements, not = , which is the assignment operator.您需要在if语句中使用===或== ，而不是= ，后者是赋值运算符。 === is preferred because it tests for strict equality (no type conversion). ===是首选，因为它测试严格相等（无类型转换）。

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

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

当我点击时，汉堡菜单没有关闭

问题描述

1 个解决方案

解决方案1
0 2020-10-04 16:11:05

当我点击时，汉堡菜单没有关闭

问题描述

1 个解决方案

解决方案1 0 2020-10-04 16:11:05

解决方案1
0 2020-10-04 16:11:05