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

イニシャライザをIIFEでラップするか、デフォルトのCSSクラスを使用してdisplay: noneを要素に追加します。あなたのcssで

var myAbout = document.getElementById('about'); 
 

 
function showAbout() { 
 
    if (myAbout.style.display === 'none') { 
 
     return myAbout.style.display = 'block'; 
 
    } 
 
    return myAbout.style.display = 'none'; 
 
} 
 

 
// Init 
 
(function(){ 
 
    myAbout.style.display = 'none'; 
 
})();

Answer 2

あなたはCSSクラスを作成することができ

#about { 
    display: none; 
} 

Answer 3

を置く：

.hidden { 
    display: none; 
} 

は、HTMLのあなたのセクションに、このクラスを追加します。 そして：私は4つのセクションを持っている場合、私は配列にそれらを配置して、代わりに私のコードを4回繰り返すことのようにそれを実行した場合

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