Button zum Anzeigen/Ausblenden div muss zweimal gedrückt werden

Question

Mein Ziel: mein div beim Laden der Seite verstecken und das div mit einem Button nur mit HTML/CSS/JavaScript anzeigen/verstecken.

Ich habe eine Schaltfläche in HTML und JavaScript eingerichtet, um mein div anzuzeigen/zu verbergen, was großartig funktioniert, wenn das div beim Laden der Seite sichtbar ist und nicht mit CSS ausgeblendet wird. Wenn ich die div mit CSS-Anzeige ausblenden: keine; Das div wird beim Laden der Seite ausgeblendet, aber die Schaltfläche muss zweimal angeklickt werden, bevor das div sichtbar wird.

HTML:

<button class="btn btn-link" id="btnLink" onclick="hideLink()">Hide 
    Content</button> <br><br> 
    <div id="myLink"> 
    <h1>Div content here</h1> 
    </div> 

CSS:

#myLink {display: none;}

JavaScript:

function hideLink() { 
var x = document.getElementById('myLink'); 
var b = document.getElementById('btnLink'); 


if (x.style.display === 'none') { 
    x.style.display = 'block'; 
    b.childNodes[0].nodeValue="Hide Content"; 

} else { 
    x.style.display = 'none'; 
    b.childNodes[0].nodeValue="Show Content"; 
} 
} 

Answer 1

Das erste Mal auf die Schaltfläche geklickt wird, wird das Element selbst hat nicht speziell den Stil für Anzeigeset. Nach deinem ersten if/then, dann tut es das.

Siehe hier: http://plnkr.co/edit/4peCJS1vhJskexqdLdKL?p=preview

var t = document.getElementById('output').innerText; 
document.getElementById('output').innerText = JSON.stringify(x.outerHTML); 

Answer 2

korrigiert es mit einem anderen, wenn ...

function hideLink() { 
var x = document.getElementById('myLink'); 
var b = document.getElementById('btnLink'); 

if (x.style.display === ''){ 
    x.style.display = 'none'; 
} 

if (x.style.display === 'none') { 
    x.style.display = 'block'; 
    b.childNodes[0].nodeValue="Hide Sitemap Section"; 

} else { 
    x.style.display = 'none'; 
    b.childNodes[0].nodeValue="Show Sitemap Section"; 
} 
} 

Answer 3

Sie sollten für !== 'block' überprüfen statt === 'none'

Der Wert x.style.display ist leer, wenn wir none in der CSS verwenden, da der CSS-Selektor das none Attribut als das Element erhält (das ist, was ich verstehe). So die Überprüfung === none vergleicht tatsächlich wird es leer und gibt false zurück (x.style.display = '').

Jetzt, nachdem wir den Wert auf block mit JS gesetzt haben, hat die Eigenschaft style.display des Elements einen Wert, den wir vergleichen können.

function hideLink() { 
 
    var x = document.getElementById('myLink'); 
 
    var b = document.getElementById('btnLink'); 
 

 

 
    if (x.style.display !== 'block') { 
 
    x.style.display = 'block'; 
 
    b.childNodes[0].nodeValue = "Hide Content"; 
 

 
    } else { 
 
    x.style.display = 'none'; 
 
    b.childNodes[0].nodeValue = "Show Content"; 
 
    } 
 
}

#myLink { 
 
    display: none; 
 
}

<button class="btn btn-link" id="btnLink" onclick="hideLink()"> 
 
Show Content 
 
</button> 
 
<br><br> 
 
<div id="myLink"> 
 
    <h1>Div content here</h1> 
 
</div>