const hamburgerMenuBtn = document.getElementById("hamburger-menu-button");
hamburgerMenuBtn.addEventListener("click", function() {
hamburgerPopupToggle()
});
function hamburgerPopupToggle() {
console.log("Button pressed");
const hamburgerMenuPopup = document.getElementById("hamburger-menu-popup");
if (hamburgerMenuPopup.style.display === "block") {
hamburgerMenuPopup.style.display = "none";
console.log(hamburgerMenuPopup.style.display);
} else {
hamburgerMenuPopup.style.display = "block";
console.log(hamburgerMenuPopup.style.display);
}
}#hamburger-menu-popup { display: none; }<div class="hamburger-menu">
<span id="hamburger-menu-button">menu</span>
<div id="hamburger-menu-popup">
<div id="home-button">Home</div>
<div id="create-post">Create a Post</div>
</div>
</div>The popup opens
(https://i.sstatic.net/4hlVl4VL.png)
But then instead of setting display style back to “none”, it sets it to “unset !important”, BUT it logs that it’s “none” (https://i.sstatic.net/DadeuwQ4.png)(https://i.sstatic.net/bmL9RzHU.png)
So, for some reason it logs what was supposed to happen, but the CSS doesn’t change whatsoever. (It changes, but not as expected)
3
Your code works fine for me, so there’s probably something else causing the issue for you (some plugin probably?).
I recommend just toggling a class on your menu-element. This has two advantages:
- You don’t need the if in your JS code
- You can do all styling in CSS
JS:
let hamburgerMenuPopup = document.getElementById("hamburger-menu-popup");
hamburgerMenuPopup.classList.toggle("show");
CSS:
#hamburger-menu-popup{
display:none;
}
#hamburger-menu-popup.show{
display:block;
}
** EDIT **
The solution was to not only change the display to “block”, but also visibility to “visible”, so the final code is now:
const hamburgerMenuBtn = document.getElementById("hamburger-menu-button");
hamburgerMenuBtn.addEventListener("click", function(){hamburgerPopupToggle()});
function hamburgerPopupToggle() {
console.log("Button pressed");
const hamburgerMenuPopup = document.getElementById("hamburger-menu-popup");
if (hamburgerMenuPopup.style.display === "block") {
hamburgerMenuPopup.style.display = "none";
hamburgerMenuPopup.style.visibility = "hidden";
console.log(hamburgerMenuPopup.style.display);
} else {
hamburgerMenuPopup.style.display = "block";
hamburgerMenuPopup.style.visibility = "visible";
console.log(hamburgerMenuPopup.style.display);
}
}
1
Please try like this :
const hamburgerMenuBtn = document.getElementById("hamburger-menu-button");
hamburgerMenuBtn.addEventListener('click', event => {
let hamburgerMenuPopup = document.getElementById("hamburger-menu-popup");
if (hamburgerMenuPopup.style.display === "none") {
document.getElementById("hamburgerMenuPopup").style.display = "block";
} else {
document.getElementById("hamburgerMenuPopup").style.display = "none";
}
});const hamburgerMenuBtn = document.getElementById("hamburger-menu-button");
hamburgerMenuBtn.addEventListener('click', event => {
let hamburgerMenuPopup = document.getElementById("hamburger-menu-popup");
if (hamburgerMenuPopup.style.display === "none") {
document.getElementById("hamburgerMenuPopup").style.display = "block";
} else {
document.getElementById("hamburgerMenuPopup").style.display = "none";
}
});<div class="hamburger-menu">
<span id="hamburger-menu-button">menu</span>
<div id="hamburger-menu-popup">
<div id="home-button">Home</div>
<div id="create-post">Create a Post</div>
</div>
</div>#hamburger-menu-popup { display: none; }1