'addEventListener' 仅在点击

Question

只有在另一个菜单(移动导航(上的转换完成后，我才使用"addEventListener"打开菜单(流派容器(。问题是，一旦一切都关闭了，我试图重新激活移动导航，即使我没有点击流派容器，"addEventListener"似乎也会启动。我想要的是当我关闭移动导航时一切都能重新开始。

function menu() {
var y = document.getElementById('genres-container');
var x = document.getElementById('mobile-nav');
// If genres-container is open, close it.
if (y.className === 'nav-active') {
y.className = 'nav-disabled';
x.className = 'nav-disabled';
}
// Else, open or close mobile-nav.
else {
if (x.className === 'nav-disabled') {
x.className = 'nav-active';
} else {
x.className = 'nav-disabled';
}
}
}
function genres() {
var x = document.getElementById('mobile-nav');
var y = document.getElementById('genres-container');
// If mobile-nav is open, close it.
if (x.className === 'nav-active') {
x.className = 'nav-disabled';
//Wait for transition to be over.
let element = document.getElementById("mobile-nav");
element.addEventListener("transitionend", function(event) {
// If genres-container is closed, open it.
if (y.className === 'nav-disabled') {
y.className = 'nav-active';
}
// Else, close it.
else {
y.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="menu()">menu</a>
<div id="mobile-nav" class="nav-disabled">
<a class="nav-link" onclick="genres()">genres</a>
</div>
<div id="genres-container" class="nav-disabled">
genres menu
</div>

Answer 1

您需要将transitionend的eventListener移动到onClick函数之外。否则，将多次添加事件侦听器。

var x = document.getElementById('mobile-nav');
var y = document.getElementById('genres-container');
var isMenuTransition = false;
function menu() {
isMenuTransition = true;
// If genres-container is open, close it.
if (y.className === 'nav-active') {
y.className = 'nav-disabled';
x.className = 'nav-disabled';
}
// Else, open or close mobile-nav.
else {
if (x.className === 'nav-disabled') {
x.className = 'nav-active';
} else {
x.className = 'nav-disabled';
}
}
}
let element = document.getElementById("mobile-nav");
element.addEventListener("transitionend", function(event) {
if(!isMenuTransition){
// If genres-container is closed, open it.
if (y.className === 'nav-disabled') {
y.className = 'nav-active';
}
// Else, close it.
else {
y.className = 'nav-disabled';
}
} else {
isMenuTransition = false;
}
}, false);
function genres() {

// If mobile-nav is open, close it.
if (x.className === 'nav-active') {
x.className = 'nav-disabled';
//Wait for transition to be over.
}
}

.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="menu()">menu</a>
<div id="mobile-nav" class="nav-disabled">
<a class="nav-link" onclick="genres()">genres</a>
</div>
<div id="genres-container" class="nav-disabled">
genres menu
</div>