Vanilla JS 菜單下拉菜單不會關閉

Question

當我單擊 fa-bars 打開顯示 #navbar 時，它將顯示

但是當我再次單擊菜單時，它不會關閉菜單。 不確定是什么

我做錯了嗎？ 我嘗試使用事件目標，但這也不起作用。 我要嗎

需要制作另一個 class 來激活 class 看看它是否有效？

 const navbar = document.querySelector('#navbar'); const menuBars = document.querySelector('.fa-bars'); menuBars.addEventListener('click', ()=>{ if(navbar ==='block'){ navbar.style.display='none'; } else{ navbar.style.display='block'; } });

 .icon-nav{ display: flex; flex-direction: row; justify-content: flex-end; margin-top: 20px; margin-right: 20px; }.fa-bars{ color: #3099b4; font-size: 28px; }.fa-bars:hover{ cursor: pointer; color: #4f5052; transition: all.4s ease-in; } /* navbar on drop down */ #navbar{ display: none; flex-direction: column; height: 40vh; }.links{ display: flex; flex-direction: column; text-align: center; font-size: 38px; }.links a{ text-decoration: none; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color:#3099b4; padding: 5px; }.links a:hover{ color: #cee3d9; transition: all.4s ease-in; }

 <div class="icon-nav"> <i class="fas fa-bars"></i> </div> <header id="navbar"> <div class="links"> <a href="index.html">Home</a> <a href="#about">About Me</a> <a href="#project">Projects</a> <a href="#contact">Contacts</a> </div> </header>

Answer 1

if(navbar.style.display ==='block'){ //Here you need to check display style
  navbar.style.display='none';
}
else {
  navbar.style.display='block';
}

只需更改 if 條件，您只檢查元素，但您需要檢查該元素的樣式以使其不顯示任何內容。 我編輯了條件

Answer 2

您需要檢查navbar.style.display ==='block'是否可以解決您的問題。

但我會使用 css class 來解決這個問題。 在這里你可以檢查我的方法。 我添加了一個active的 class 來顯示或隱藏菜單。

在這里，我使用 js 切換了active的 class。

menuBars.addEventListener('click', ()=>{
  navbar.classList.toggle('active')
});

這是額外的 css

#navbar.active {
  display: block;
}

 const navbar = document.querySelector('#navbar'); const menuBars = document.querySelector('.fa-bars'); menuBars.addEventListener('click', ()=>{ navbar.classList.toggle('active') });

 .icon-nav{ display: flex; flex-direction: row; justify-content: flex-end; margin-top: 50px; margin-right: 20px; }.fa-bars{ color: #3099b4; font-size: 28px; }.fa-bars:hover{ cursor: pointer; color: #4f5052; transition: all.4s ease-in; } /* navbar on drop down */ #navbar{ display: none; flex-direction: column; height: 40vh; } #navbar.active { display: block; }.links{ display: flex; flex-direction: column; text-align: center; font-size: 38px; }.links a{ text-decoration: none; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color:#3099b4; padding: 5px; }.links a:hover{ color: #cee3d9; transition: all.4s ease-in; }

 <:DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <link rel="stylesheet" href="https.//use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> </head> <body> <div class="icon-nav"> <i class="fas fa-bars"></i> </div> <header id="navbar"> <div class="links"> <a href="index.html">Home</a> <a href="#about">About Me</a> <a href="#project">Projects</a> <a href="#contact">Contacts</a> </div> </header> </body> </html>

Vanilla JS 菜單下拉菜單不會關閉

問題描述

2 個解決方案

解決方案1
1 2020-05-19 04:52:40

解決方案2
0 2020-05-19 05:01:12

Vanilla JS 菜單下拉菜單不會關閉

問題描述

2 個解決方案

解決方案1 1 2020-05-19 04:52:40

解決方案2 0 2020-05-19 05:01:12

解決方案1
1 2020-05-19 04:52:40

解決方案2
0 2020-05-19 05:01:12