javascript - 在按钮单击时设置导航栏不可见

Question

我的 JavaScript 代码有问题。

我有一个带有 5 个链接的导航栏。在默认 CSS 设置中，导航是固定的。但我想做的是当有人点击这 5 个链接之一时，将导航栏的位置从固定更改为粘滞。但看起来我的代码的某些部分不起作用。

代码如下:

    var header = document.querySelector("header");
var isClicked = false;
var nav = document.querySelectorAll("a");

for(var i = 1; i < 6; i++){
    nav[i].addEventListener("click", function(){
        isClicked = true;
    });
}

if(isClicked === true){
    header.classList.remove("visible");
    header.classList.add("invisible");
}

我检查了控制台，当我单击导航栏上的链接时，isClicked 变量变为 true。看起来我添加和删除这些类的部分代码没有执行。

我希望有人能帮助我。

Answer 1

类删除或添加逻辑将在处理程序内部，索引应从 0 开始，否则第一个 anchor 将不会添加 eventListener

var header = document.querySelector("header");
var nav = header.querySelectorAll("a");

for(var i = 0; i < 5; i++){
    nav[i].addEventListener("click", function(){
        header.classList.remove("visible");
        header.classList.add("invisible");
    });
}