javascript - 'addEventListener' 仅 onclick
问题描述
只有在另一个菜单(移动导航)上的转换完成后,我才使用“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>
解决方案
您需要将eventListener
for移到函数transitionend
之外。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>
推荐阅读
- r - 如何使列名成为数据框中的实际列
- c# - “路径中的非法字符”错误打开服务配置文件
- java - com.google.datastore.v1.client.DatastoreException:找不到匹配的索引
- asp.net-core - Serilog 使用 EnrichDiagnosticContext 并没有在 SignalR Hub 中记录其他属性
- go - func ContainsAny() 在 Go 中是如何工作的?
- r - 当我尝试模拟无限猴子问题时,str_detect 不起作用(也许我不知道如何使用它)
- node.js - 如何在nodejs中将数据从控制器传输到socket.io?
- fedora - 64 位 riscv Fedora 上缺少库
- c# - 为什么我的 DataContext 会从我下面切换出来进行绑定?
- python - Django ORM中带有时间戳且没有外键的内部连接