Simple Javascript ne fonctionne pas dans FireFox (mais dans tous les autres navigateurs)

Question

J'ai ce code que j'utilise pour révéler les réponses à certaines questions dans une section FAQ sur mon site. Vous cliquez sur la question et la div contenant la réponse est indiquée ci-dessous.

Fonctionne dans Safari, Chrome, Opera et même IE, mais pas dans Firefox.

Les liens ne font rien.

Des idées pourquoi, ou de meilleures méthodes pour faire une section «FAQ»? J'ai déjà jQuery chargé dans ma page s'il y a quelque chose qui pourrait être mieux fait avec, je ne sais pas. Ou une solution uniquement CSS?

Voici mon code:

Code JS:

<script type="text/javascript"> 
    function toggle(tag) { 
     if (tag.style.display=='') { 
      tag.style.display='none'  
     } else { 
      tag.style.display='' 
     } 
    } 
    </script> 

code HTML:

<a href="javascript: toggle(question1)">FAQ Question goes here</a> 
    <div id="question1" style="display:none"> 
     <p>FAQ Answer goes here</p> 
    </div 

Answer 1

Sérieusement, je vous recommande d'utiliser jquery, vous n'aurez pas ce genre de problème et il est à moins de 30 Kbs.

Voici ce que vous recherchez:

http://api.jquery.com/toggle/

Quoi qu'il en soit, vous devriez toujours utiliser: document.getElementByID pour obtenir un certain élément.

ÉDITÉ

Cela dépend de la structure de votre code HTML, si j'avais cette situation:

http://www.jsfiddle.net/dactivo/Qcm4G/

je ferais ceci:

$(".questionsheader").click(function(){ 
          $(this).next("div").toggle();        } 
); 

QUELQUES AUTRES CONSIDÉRATIONS

• Je n'utiliserais pas "display: none" pour les réponses pour une raison simple mais peut-être pas pratique. Les personnes sans Javascript activé (comme cela arrive avec le logiciel de certaines personnes handicapées) ne seront pas en mesure de lire les réponses. C'est pourquoi je cache les réponses avec javascript. Ils ne disparaîtront que si javascript est activé.
• Vous pouvez utiliser d'autres effets comme animate(), slidetoggle() pour le rendre plus intéressant.

Answer 2

Parce que vous définissez l'ID de l'élément que vous souhaitez basculer, vous auriez besoin d'utiliser:

document.getElementByID(tag).style.display 

au lieu de seulement tag.style.display à l'intérieur de votre fonction de bascule.

Answer 3

Essayez de régler l'affichage à « bloc »

tag.style.display='block' 

Answer 4

essayer <a onclick='toggle(document.getElementById("question1"));'">

Answer 5

Essayez cette (citations ajoutées):

<a href="javascript: toggle('question1')">FAQ Question goes here</a> 
    <div id="question1" style="display:none"> 
     <p>FAQ Answer goes here</p> 
    </div> 

et (utilisé getElementById):

<script type="text/javascript"> 
function toggle(tag) { 
    tag = document.getElementById(tag); 
    if (tag.style.display=='') { 
     tag.style.display='none'  
    } else { 
     tag.style.display='' 
    } 
} 
</script> 

MISES À JOUR: pour la solution jQuery, j'utiliser l'approche onglets jQuery:

<a class="toggle" href="#question1">FAQ Question Link 1</a> 
<div id="question1" style="display:none"> 
    <p>FAQ Answer goes here</p> 
</div> 
<a class="toggle" href="#question2">FAQ Question Link 2</a> 
<div id="question2" style="display:none"> 
    <p>FAQ Answer goes here</p> 
</div> 

et la JS:

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.toggle').click(function() { 
     $($(this).attr('href')).toggle(); 
     return false; 
    }); 
}); 
</script> 

Answer 6

Une façon plus simple de le faire est la suivante:

<script type="text/javascript"> 
    function toggle(tag) { 
     tag.style.display = (tag.style.display == 'block') ? 'none' : 'block'; 
    } 
</script> 

Answer 7

Depuis que vous avez déjà jQuery, essayez ceci:

$("#" + tag).toggle(); 

Answer 8

Ok il y a un certain nombre de questions Dans votre code

D'abord, il est important de terminer vos lignes avec un point-virgule.

tag.style.display='none' devrait être tag.style.display='none';

Deuxièmement, vous devez utiliser document.getElementById sur l'ID pour obtenir l'élément DOM

Je ne somthing comme ceci:

function toggle(elementId) { 
    var tag = document.getElementById(elementId); 
    ... 
} 

Voici un demohttp://jsbin.com/abuce4/edit

Answer 9

<a href="#" onclick="javascript:$(this).next().toggle();">Question</a> 
<div style="display:none;">Answer</div> 

Ou plus 'générique' et propre:

HTML:

<a class="question">Question 1</a> 
<div class="answer">Answer 1</div> 

<a class="question">Question 2</a> 
<div class="answer">Answer 1</div> 

CSS:

.answer{ 
display:none; 
} 

JS:

$(document).ready(function() { 

$(".question").click(function(event){ 
    $(this).next().slideToggle(); 
}); 
} 

slideToggle(); ou basculer(); Profitez-en.