Javascript显示隐藏

我想做一个秀，隐藏我的部分

这是目前的工作

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

我怎样才能解决这个问题

 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';
    }
}

---

在IIFE中封装初始化器，或者通过默认CSS类将

display:none

添加到元素中

var myAbout=document.getElementById（'about'）；
函数showAbout（）{
如果（myAbout.style.display=='none'）{
返回myAbout.style.display='block'；
}
返回myAbout.style.display='none'；
}
//初始化
（功能（）{
myAbout.style.display='none'；
})();

在IIFE中包装初始化器，或通过默认CSS类将

显示：无

添加到元素中

var myAbout=document.getElementById（'about'）；
函数showAbout（）{
如果（myAbout.style.display=='none'）{
返回myAbout.style.display='block'；
}
返回myAbout.style.display='none'；
}
//初始化
（功能（）{
myAbout.style.display='none'；
})();css

put中编码>

#about {
    display: none;
}

---

在您的

css

put中

#about {
    display: none;
}

---

您可以创建一个css类：

.hidden {
  display: none;
}

用html将此类添加到您的分区中。 然后：

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

---

您可以创建一个css类：

.hidden {
  display: none;
}

用html将此类添加到您的分区中。 然后：

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

---

我也考虑过，但是第一次切换不会正常工作，因为样式表规则没有添加到

。style

：@nilobarp在运行它之后，单击

toggle

，div就会显示出来？是的，确实如此。@nilobarp奇怪，我必须单击

toggle

两次才能显示div。在Chrome和Firefox的最新版本上都进行了测试。我也考虑过，但是第一次切换不会正常工作，因为样式表规则没有添加到

。style

：@nilobarp运行后，单击

toggle

会显示div？是的，确实如此。@nilobarp奇怪，我必须单击两次

Toggle

，才能显示div。在Chrome和Firefox最新版本上都进行了测试。如果我有4个部分，那么如果我将它们放在一个数组中，然后像这样运行，而不是重复我的代码4次，效率会更高吗？如果我有4个部分，如果我将它们放在一个数组中，然后像那样运行，而不是重复我的代码4次，效率会更高吗？