Stack Overflow Asked by iLucifer on November 15, 2020
At the moment when the menu button is clicked the dropdown displays, however, clicking the button once more does not hide the dropdown menu as it should.
Script.js
//Variables
var menuBtn = document.getElementById('menu__icon');
var dropdown = document.getElementsByClassName('dropdown__menu')[0];
var isClicked = false;
// Drop down Mobile
menuBtn.addEventListener('click', function () {
if (isClicked == false) {
//Btn Styles
menuBtn.style.backgroundColor = "none";
menuBtn.style.color = "black";
//Menu visible
dropdown.style.display = "none";
} else {
isClicked = true;
//Btn Styles
menuBtn.style.backgroundColor = "#1f283b";
menuBtn.style.color = "black";
//Menu visible
dropdown.style.display = "block";
}
});
it is better to change the content of your 'if block statement' to display the dropdown since the initial value of isClicked is false. After clicking the button then isCliked must be updated to true since you clicked it. Then the else block will contain the code for hiding the dropdown then update the isClicked variable to false.
isClicked = false;
// inside the event listener
if(isClicked==false){
//show dropdown
isClicked = true;
}else{
//hide dropdown
isClicked = false;
}
you can also use jquery Library and use toggle() function
Correct answer by Eric Echemane on November 15, 2020
You'd be better off using CSS, toggling a class on and off. With this approach you could then also leverage CSS Transitions.
var menuBtn = document.getElementById('menu__icon');
var dropdown = document.getElementsByClassName('dropdown__menu')[0];
menuBtn.addEventListener("click", function() {
this.classList.toggle("active");
dropdown.classList.toggle("active");
});
.dropdown__menu {
/*display: none;*/
transform: scaleY(0);
transform-origin: top;
transition: transform 0.26s ease;
}
.dropdown__menu.active {
/*display: block;*/
transform: scaleY(1);
}
#menu__icon {
transition: all 1s;
}
#menu__icon.active {
background-color: #1f283b;
color: #FFF;
}
<button id="menu__icon">Click Me</button>
<div class="dropdown__menu">I'm a menu</div>
If you really want to keep the style in the javascript, invert the isClicked variable in one spot.
//Variables
var menuBtn = document.getElementById('menu__icon');
var dropdown = document.getElementsByClassName('dropdown__menu')[0];
var isClicked = false;
// Drop down Mobile
menuBtn.addEventListener('click', function () {
if (!isClicked) {
//Btn Styles
menuBtn.style.backgroundColor = "none";
menuBtn.style.color = "black";
//Menu visible
dropdown.style.display = "none";
} else {
//Btn Styles
menuBtn.style.backgroundColor = "#1f283b";
menuBtn.style.color = "black";
//Menu visible
dropdown.style.display = "block";
}
//Invert true/false
isClicked = !isClicked
});
Answered by Jon P on November 15, 2020
set isClicked to true in the first if statement then false in the other.
//Variables
var menuBtn = document.getElementById('menu__icon');
var dropdown = document.getElementsByClassName('dropdown__menu')[0];
var isClicked = false;
// Drop down Mobile
menuBtn.addEventListener('click', function(){
if (isClicked == false) {
//Btn Styles
menuBtn.style.backgroundColor = "none";
menuBtn.style.color = "black";
//Menu visible
dropdown.style.display = "none";
isClicked = true
} else {
isClicked = false;
//Btn Styles
menuBtn.style.backgroundColor = "#1f283b";
menuBtn.style.color = "black";
//Menu visible
dropdown.style.display = "block";
}
});
Answered by BFP on November 15, 2020
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP