Ouvrir la fonction de fermeture?

Question

J'ai trouvé une fonction sur Ozzu.com qui correspond à mes besoins Le seul problème est que je ne Grap ce qu'il se passe à 100% pourriez-vous me donner une course vers le bas de ce qu'il se passe ici

function toggle(id) { 
    var e = document.getElementById(id); 

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

et cela va dans le page source

<a href="#" onclick="toggle('content')">Toggle</a> 

Je suis confus sur ce que l'if/else est en train de faire pour faire ce travail

Merci

Answer 1

Vous modifiez la propriété CSS display de l'élément HTML avec l'ID "content", onclick, via JavaScript. Chaque fois que vous appelez la fonction toggle, il fait essentiellement les éléments suivants:

if (document.getElementById("content").style.display == '') { 
    document.getElementById("content").style.display = 'none'; 
} else { 
    document.getElementById("content").style.display = ''; 
} 

Si vous définissez la propriété display-'none', l'élément HTML avec ID « contenu » ne sera pas rendu. Si vous le définissez sur une chaîne vide (""), il utilisera la valeur par défaut de cet élément HTML (visible dans tous les cas).

Answer 2

Un événement onclick est ajouté au noeud. Alors que lorsque vous cliquez dessus, il va appeler toggle et il passera également l'argument content.

• La fonction toggle reçoit un argument, qui est utilisé comme l'identificateur.

• En utilisant cet ID, il obtiendra alors le elemnt de la dom. Avec l'élément enregistré à e, il vérifie les attributs de style pour voir à quoi la propriété "display" est définie.

• Si la propriété est une chaîne vide (c'est-à-dire non définie), alors elle la définit pour n'en afficher aucune. De même, s'il est déjà configuré pour ne pas en afficher, il le mettra à blanc. (Ainsi le montrant à nouveau).

Tout comme une note de côté, c'est en fait pas une très bonne façon de le faire, car il suppose que les éléments n'ont pas eu leur réglage de l'affichage a changé.

Answer 3

Il est cependant préférable de le faire

function toggle(id) { 
    var e = document.getElementById(id); 
    e.style.display = (e.style.display == '')?'none':''; // I prefer a ternary here 
    return false; // cancel the click ! 
} 


<a href="#" onclick="return toggle('content')">Toggle</a> 

ou discrètement:

window.onload=function() { 
    document.getElementById('toggleLink').onclick=function() { 
    var e = document.getElementById('content'); 
    e.style.display = (e.style.display == '')?'none':''; // I prefer a ternary here 
    return false; // cancel the click ! 
    } 
} 


<a href="#" id="toggleLink"">Toggle</a>