Je veux que le visiteur puisse développer / effondrer certaines sections et utiliser: et dans la fonction J'ai la fonction: La première fois qu'un bouton est cliqué, il ne fonctionne pas, les clics suivants (sur l'un des boutons) fonctionnent correctement. Il y a une conversation connexe ici:
doit être cliqué deux fois pour déclencher la fonction < / p> mais je ne comprends pas la réponse (trop technique ;-),
Quelqu'un pourrait-il aider à l'expliquer s'il vous plaît?
7 Réponses :
Le style initial sur votre "xx" div peut causer des problèmes ...
Dites une règle de la feuille de style configurée pour rendre votre (... où bien sûr le sélecteur ( Cela semblerait fonctionner correctement, dans la mesure où la page se chargera avec tous vos éléments code> div (code> masqué ("effondré"). Cependant, il n'y a pas de valeur réelle pour la propriété Style.Display sur les éléments eux-mêmes em> - ils hérimentent simplement de la valeur de la feuille de style. Donc, dans votre code, le test que vous utilisez pour vérifier si l'élément est masqué: p> div code> s initialement caché. Quelque chose comme: p> div code>) sera probablement un peu moins large) p> function getStyle(el, name)
{
// the way of the DOM
if ( document.defaultView && document.defaultView.getComputedStyle )
{
var style = document.defaultView.getComputedStyle(el, null);
if ( style )
return style[name];
}
// IE-specific
else if ( el.currentStyle )
return el.currentStyle[name];
return null;
}
function toggleDiv(a){
var e=document.getElementById(a);
if(!e)return true;
if(getStyle(e, "display") == "none"){
e.style.display="block"
} else {
e.style.display="none"
}
return true;
}
Info supplémentaire: La page Validate et le même double clic de double clic est nécessaire dans Chrome, c'est-à-dire Firefox
Réponse: Merci d'avoir pris le temps de l'expliquer si clairement Jaime. J'ai maintenant compris et j'ai travaillé. Vous pouvez voir votre pratique pratique ici: www.alan
quelque chose comme ça pourrait fonctionner pour vous. Mais mettez-le dans la tête du document. La fonction Window Onload est importante car le DOM doit être chargé avant de pouvoir vous désordre avec le champ d'entrée
window.onload = function(){
// get input field from html
var myInput = document.getElementById('divOpener');
// add onclick handler
myInput.onclick = function(){
// if you really need to say which div in the document body, you can
// add it to the rel or ref etc. attributes then get the value with
// get attribute
var myDiv = document.getElementById(this.getAttribute('rel'));
if(!myDiv) return;
if(myDiv.style.display=="none"){
myDiv.style.display="block";
} else {
myDiv.style.display="none";
}
}
}
Et si cela ne fonctionne pas, indiquez quelles sont vos exigences et nous pouvons aller de là ...
Pour enregistrer tout le code JavaScript supplémentaire pour obtenir le style, etc., une solution simple pour cela serait d'ajouter la peau CSS à l'élément lui-même.
<div class="yourclass" style="display:none;">content</div>
Implémentation plus facile, comment
var a=1;
function toggleDiv(xx){
var e=document.getElementById(xx);
if(a==1){
e.style.display="block";a=0;
} else {
e.style.display="none";
a=1;
}
}
La réponse simple que vous recherchez est d'ajouter l'affichage il retournera true! : aucun; au style en ligne. De cette façon, lorsque vous regardez
La réponse de Shog9 m'a sauvé d'une frustration de soirée. Merci.
Cependant, il y a une solution beaucoup plus simple que celle qu'il présente. Le secret consiste simplement à changer autour de l'ordre du conditionnel. IE P>
if(e.style.display == "block"){
e.style.display="none"
} else {
e.style.display="block"
}
Je sais que c'est un vieux fil, mais pour être un peu utile (pour un changement), vous pouvez toujours appeler l'affichage actuel dans la fonction. Sinon, vous pouvez définir une charge en cours, mais étant donné que le bouton peut ne pas être cliqué, je préférerais faire via un AddeventListener ().
document.getElementById("someID1").addEventListener("click", hideOpen);
function hideOpen() {
var x = document.getElementById("someID2");
x.style.display = window.getComputedStyle(document.getElementById("someID2")).display;
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
Quelle est la définition / style du xx 'div?
La première chose que je ferais est d'ouvrir Firebug (outil de Device de Firefox JavaScript), définissez un point d'arrêt iside toggledive et passez à travers, en vous assurant que tout est comme je pense que c'est. Si vous ne voulez pas faire face à cela, vous pouvez définir faire une alerte (e.style.display) dans votre fonction. Cela pourrait éclairer une lumière sur les choses.
Juste après la première instruction IF, ajoutez cette ligne: alerte ("Affichage est '" + e.style.display + "'"); Puis exécutez le code à nouveau. Cela devrait vous aider à comprendre ce qui se passe.