javascript - 使用 querySelector 获取导航以显示和隐藏并显示无/块？

Question

我试图制作一个在您按下按钮时显示和隐藏的导航栏。我让它显示但不隐藏。如果有人知道我如何在其显示时添加一个小淡入淡出动画，请告诉我。

我已经使用 js 和 querySelector 将其固定。

let button = document.getElementById("button");

let press = document.querySelector('nav').style.display = 'none';
press = true;

button.onclick = () => {

    if(press == true){
        document.querySelector('nav').style.display = 'block';
    }
    else  if(press == false){
        document.querySelectorAll('nav').style.display = 'none';
    }
}

这使得导航显示，但它不会再次隐藏。

Answer 1

为下次点击更新您的press值。

    if(press == true){
        document.querySelector('nav').style.display = 'block';
    } else {
        document.querySelectorAll('nav').style.display = 'none';
    }
    press = !press;