javascript - 创建一个按钮，根据当前是否显示来显示或隐藏 div

Question

我对 JS 还很陌生，想知道是否有更简洁的方法来编写这段代码吗？

我正在尝试创建一个按钮，根据当前是否显示来显示或隐藏 div。

非常感谢

安妮

var button = document.getElementById('button');
var hideText = document.getElementById('output').className = 'hide';

button.addEventListener('click', ()=>{
    if(hideText){
        document.getElementById('output').className = 'unhide';
        hideText = false;
    }else{
        document.getElementById('output').className = 'hide';
        hideText = true;
    }
})

CSS

.hide{display: none;}

.unhide{display: block;}

Answer 1

只需使用单个类(例如unhide)并使其默认不可见。然后做

button.addEventListener('click', () => {
    document.getElementById('output').classList.toggle('unhide');
}