JavaScript 显示隐藏

Question

我想制作一个节目并隐藏我的部分。

目前该功能有效。

但我希望当您进入网站时隐藏我的部分，然后当您单击它时它会显示。现在情况正好相反。

我该如何解决这个问题？

 document.querySelector("#about").addEventListener("click", function   (event) {
    event.preventDefault();
}, false);

function showAbout() {
    var myAbout = document.getElementById('about');
    if (myAbout.style.display === 'none') {
        myAbout.style.display = 'block';
    }
    else {
        myAbout.style.display = 'none';
    }
}

Answer 1

您可以创建一个 css 类:

.hidden {
  display: none;
}

将此类添加到 html 中的部分。然后:

document.querySelector("#about")
        .addEventListener("click", function (event) {
           event.preventDefault();
           event.target.classList.toggle('hidden');
        }, false);