Javascript顯示隱藏

我想顯示並隱藏我的部分。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'; 
    } 
}

來源

2017-09-24 Thomas Hermansen

裹在IIFE的初始化劑或通過默認的CSS類添加display: none到你的元素。

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

來源

2017-09-24 14:46:50 Win

，如果我有4個部分將它，然後是更有效的，如果我把他們安置在一個數組，然後運行它像，而不是重複我的代碼的4倍？ –

在你css把

#about { 
    display: none; 
}

來源

2017-09-24 14:47:17 nilobarp

我也想過了，但切換不會在第一次正確運行，因爲樣式表規則不會添加到'.style'中：https：//jsfiddle.net/yuriy636/mnLpm0t7/ – yuriy636

您的小提琴似乎工作正常如預期 – nilobarp

@nilobarp這是正確的答案。 –

您可以創建一個CSS類：

.hidden { 
    display: none; 
}

這個類添加到您的部分在HTML中。然後：

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

來源

2017-09-24 14:51:48 EugenAz

Javascript顯示隱藏

回答

相關問題