I'm currently utilizing jQuery to enhance my dropdown menu functionality by toggling the active class defined in my CSS. However, I've encountered a difficulty in adjusting the timeout for one of the elements. Below is some pseudo code to clarify my issue and simplify it for you all.
PSEUDO CODE
Upon button click, toggle the active class on both the navbar and dropdown menu.
If the dropdown menu has the active class, apply a timeout of .3s and respectively toggle the active class on the content-wrapper.
If the dropdown menu does not have the active class, remove the timeout and perform the toggle action on the content-wrapper.
CODE
//animation loading for the dropdown menu
$("document").ready(function(){
const navbar = $(".mobile-navbar");
const contentWrapper = $(".content-wrapper");
const menuBtn = $(".menu-button-container");
const dropdown = $(".nav-dropdown-menu");
menuBtn.click(function(){
navbar.toggleClass("active");
dropdown.toggleClass("active");
// checking if dropdown menu has the active class
// setting a timeout of .3 seconds for the content
// wrapper accordingly
if(dropdown).hasClass("active"){
setTimeout(function(){
contentwrapper.toggleClass("active");
}, 300);
}
else {
setTimeout(function(){
contentWrapper.toggleClass("active");
}, 0);
}
});
});