Pourquoi ici nous devons cliquer deux fois (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';
}

Quand ici seulement en un clic le texte disparaît (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';
}
7
Artem.Borysov 13 juil. 2015 à 00:08

4 réponses

Meilleure réponse

Vérifiez si la propriété style.display est vide

    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>
3
Bartłomiej T. Listwon 12 juil. 2015 à 21:19

Cela peut être résolu en modifiant l'ordre dans votre instruction if-else, comme:

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

DEMO

Remarque: votre code initial ne fonctionne pas car la valeur initiale de e.style.display est "" à la place none :) :)

1
lmgonzalves 12 juil. 2015 à 21:14

Dans la documentation getElementById (), ils indiquent:

Document.getElementById()

Renvoie une référence à l'élément par son ID.

Voir ici: https://developer.mozilla.org/en-US/docs / Web / API / Document / getElementById

Ainsi, votre code javascript n'évalue le HTML Sans CSS que lors de la première itération en particulier. Je suppose que c'est la raison pour laquelle il passe d'abord à else et au deuxième clic, il donne e.style.display la valeur block; car e.style.display a alors none comme valeur.

Essayez d'utiliser une méthode différente de getElementById () si jamais.

J'espère que cela aide !

2
12 juil. 2015 à 21:43

Parce que .style regarde le style en ligne direct de l'élément autre que sa feuille de style CSS. Ainsi, par exemple, cela fonctionnera si cela ressemble à ceci:

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

Voici un exemple . Sinon, le .style n'est pas défini lorsqu'il est placé dans le CSS. Dans le deuxième exemple, le premier clic définit e.style.display, puis cela fonctionne normalement par la suite. C'est pourquoi cela prend deux clics.

Une autre façon de le corriger est d'ajouter un else depuis e.style.display pour le changer en ce que vous voulez, en supposant que l'élément est caché au début:

if(e.style.display == 'block')
    e.style.display = 'none';
else if( e.style.display == 'none' )
    e.style.display = 'block';
else 
    e.style.display = 'block'; 
2
Spencer Wieczorek 12 juil. 2015 à 21:25