JS one-click Toggle (non due click) - valore predefinito di elemento toggled

Question

Perché qui abbiamo bisogno di clic due volte (http://jsfiddle.net/xL8hyoye/4/):

html:

<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a> 
<div id="foo">This is foo</div> 

css: #foo {display: none;}

JS:

function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    if(e.style.display == 'none') 
     e.style.display = 'block'; 
    else 
     e.style.display = 'none'; 
} 

---

Quando qui solo da uno scatto testo scompare (http://jsfiddle.net/xL8hyoye/5/):

html:

<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a> 
<div id="foo" style='display:none'>This is foo</div> <!-- add display style here --> 

css: <!-- delete ccs here -->

JS:

function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    if(e.style.display == 'none') 
     e.style.display = 'block'; 
    else 
     e.style.display = 'none'; 
} 

Answer 1

Verificare se la proprietà style.display è vuota

function toggle_visibility(id) { 
 
     var e = document.getElementById(id); 
 
     if(e.style.display == 'block' || e.style.display == '') 
 
      e.style.display = 'none'; 
 
     else 
 
      e.style.display = 'block'; 
 
    }

<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a> 
 
<div id="foo">This is foo</div>

Answer 2

Perché .style è guardando la dir ect stile inline dell'elemento diverso dal suo foglio di stile CSS. Così, per esempio, che funzionerà se sembrava così:

<div id="foo" style="display: none;">This is foo</div> 

Here is an example. Altrimenti lo .style non è definito quando inserito nel CSS. Nel secondo esempio il primo clic definisce e.style.display, quindi funziona normalmente in seguito. Ecco perché ci vogliono due clic.

Un altro modo per risolvere il problema è aggiungere un else dal e.style.display per cambiarlo a ciò che si vuole, supponendo che l'elemento è nascosto alla partenza:

if(e.style.display == 'block') 
    e.style.display = 'none'; 
else if(e.style.display == 'none') 
    e.style.display = 'block'; 
else 
    e.style.display = 'block'; 

Answer 3

Questo può essere risolto cambiando l'ordine nella vostra if-else dichiarazione , come:

if(e.style.display == 'block') 
    e.style.display = 'none'; 
else 
    e.style.display = 'block'; 

DEMO

Nota: il codice iniziale non funzionano perché il valore iniziale di e.style.display è "" invece none :)

Answer 4

Nella documentazione getElementById() che affermano:

Document.getElementById() 

Restituisce un riferimento all'elemento tramite il relativo ID.

vederlo qui: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

Quindi il codice JavaScript è solo valutando HTML Senza CSS alla prima iterazione in particolare. Immagino sia per questo che prima va a else e al secondo clic dà e.style.display il valore block; perché e.style.display ha come valore none.

Provare a utilizzare un metodo diverso da getElementById() se mai.

Spero che aiuti!