'addEventListener' 仅点击
'addEventListener' only onclick
只有在另一个菜单 (mobile-nav) 上的转换完成后,我才使用 'addEventListener' 打开一个菜单 (genres-container)。问题是,一旦一切都关闭并且我尝试重新激活 mobile-nav,'addEventListener' 似乎会触发,即使我没有点击 genres-container。我想要的是当我关闭 mobile-nav 时一切都重新开始。
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>
您需要将 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>
只有在另一个菜单 (mobile-nav) 上的转换完成后,我才使用 'addEventListener' 打开一个菜单 (genres-container)。问题是,一旦一切都关闭并且我尝试重新激活 mobile-nav,'addEventListener' 似乎会触发,即使我没有点击 genres-container。我想要的是当我关闭 mobile-nav 时一切都重新开始。
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>
您需要将 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>