Toggling zwischen den Blöcken

Question

Warum funktioniert dieser Code nicht und wie der eine Block gelöst wird, wird angezeigt und einige Block ist ausblenden?

function vsd(){ 
    var asd = document.getElementById("asd"); 
    var vsd = document.getElementById("vsd"); 
    var psd = document.getElementById("psd"); 
    var vps = document.getElementById("vps"); 
    var asp = document.getElementById("asp"); 
    var vsp = document.getElementById("vsp"); 
    var sad = document.getElementById("sad"); 
    if (vsd.style.display === "none") { 
     vsd.style.display ="block"; 
     asd.style.display = "none"; 
     psd.style.display = "none"; 
     vps.style.display = "none"; 
     asp.style.display = "none"; 
     vsp.style.display = "none"; 
     sad.style.display = "none"; 
    } else { 
     vsd.style.display = "none";} 
} 

Answer 1

Seien Sie sicher, dass vsd in Display: kein Modus zur Ladezeit und in der else-Anweisung denken psd zu zeigen, zurück, VSD blah

Answer 2

ich Ihren Ansatz mit einer css Klasse hide

ersetzt

window.onload = vsd(); 
 

 
function vsd(){ 
 
    var asd = document.getElementById("asd"); 
 
    var vsd = document.getElementById("vsd"); 
 
    var psd = document.getElementById("psd"); 
 
    var vps = document.getElementById("vps"); 
 
    var asp = document.getElementById("asp"); 
 
    var vsp = document.getElementById("vsp"); 
 
    var sad = document.getElementById("sad"); 
 
    console.log($("#vsd")[0].attr('style')) 
 
    if (vsd.classList.contains("hide") { 
 
     vsd.classList -= "hide"; 
 
     asd.classList += "hide"; 
 
     psd.classList += "hide"; 
 
     vps.classList += "hide"; 
 
     asp.classList += "hide"; 
 
     vsp.classList += "hide"; 
 
     sad.classList += "hide"; 
 
    } else { 
 
     vsd.classList += "hide"; 
 
    } 
 
}

.hide { 
 
    display : none; 
 
}

<button id="vsd" class="">vsd</button> 
 
<button id="asd" class="hide">asd</button> 
 
<button id="psd" class="hide">psd</button> 
 
<button id="vps" class="hide">vps</button> 
 
<button id="asp" class="hide">asp</button> 
 
<button id="vsp" class="hide">vsp</button> 
 
<button id="sad" class="hide">sad</button>