I have a scenario where I am using 'addEventListener' to handle the opening of a menu (genres-container) only after the transition on another menu (mobile-nav) has completed. The issue I am facing is that even after closing everything and trying to reopen mobile-nav, 'addEventListener' seems to trigger, even if I haven't clicked on genres-container. What I am looking for is a way to reset everything when I close mobile-nav.
function handleMenu() {
var genresMenu = document.getElementById('genres-container');
var mobileMenu = document.getElementById('mobile-nav');
// If genres-container is open, close it.
if (genresMenu.className === 'nav-active') {
genresMenu.className = 'nav-disabled';
mobileMenu.className = 'nav-disabled';
}
// Else, open or close mobile-nav.
else {
if (mobileMenu.className === 'nav-disabled') {
mobileMenu.className = 'nav-active';
} else {
mobileMenu.className = 'nav-disabled';
}
}
}
function handleGenres() {
var mobileMenu = document.getElementById('mobile-nav');
var genresMenu = document.getElementById('genres-container');
// If mobile-nav is open, close it.
if (mobileMenu.className === 'nav-active') {
mobileMenu.className = 'nav-disabled';
// Wait for transition to complete.
let element = document.getElementById("mobile-nav");
element.addEventListener("transitionend", function(event) {
// If genres-container is closed, open it.
if (genresMenu.className === 'nav-disabled') {
genresMenu.className = 'nav-active';
}
// Else, close it.
else {
genresMenu.className = 'nav-disabled';
}
}, false);
}
}.nav-disabled {
max-height: 0;
overflow: hidden;
}
.nav-active {
max-height: 150px;
overflow: hidden
}
#mobile-nav {
transition: max-height ease .4s;
}
#genres-container {
transition: max-height ease .4s;
}<a class="nav-link" onclick="handleMenu()">menu</a>
<div id="mobile-nav" class="nav-disabled">
<a class="nav-link" onclick="handleGenres()">genres</a>
</div>
<div id="genres-container" class="nav-disabled">
genres menu
</div>