L'effet d'accordéon de JavaScript ne fonctionnera pas, quelque chose à voir avec pseudoclass?

Question

J'ai essayé de faire un effet d'accordéon avec JavaScript basé sur cette vidéo en changeant quelques choses comme l'utilisation d'un bouton d'entrée au lieu d'un lien pour le sélecteur. Cependant, pour une raison quelconque, cela ne fonctionne pas. La console d'erreur de Firefox sort unknown pseudo-class or pseudo-element "visible" chaque fois que j'essaie de l'utiliser. Quel est le problème?

$("div.example").hide(); 
$("input.exampleButton").click(function(){ 
    $("div.example:visible").slideUp("slow"); 
    $(this).parent().next().slideDown("slow"); 
    //return false; if you don't want the link to follow 
}); 

Voici le code HTML

input type="button" value="See An Example" class="exampleButton" /> 
<div class="example"> 
    ...content 
</div> 
input type="button" value="See An Example" class="exampleButton" /> 
<div class="example"> 
    ...content 
</div> 

Answer 1

Vous pouvez ignorer l'avertissement dans la console. La raison pour laquelle le code ne fonctionne pas est que la structure de balisage ne correspond pas à la traversée effectuée par le Javascript. Chaque <input> devrait probablement être à l'intérieur d'un <div>, de sorte que l'appel à parent().next() passera correctement de l'entrée au <div class="example"> qui le suit. Vous manquez également l'ouverture < sur les entrées mais je suppose que c'est une erreur de copier/coller.

balisage de travail:

<div> 
    <input type="button" value="See An Example" class="exampleButton" /> 
</div> 
<div class="example"> 
    ...content 
</div> 
<div> 
    <input type="button" value="See An Example" class="exampleButton" /> 
</div> 
<div class="example"> 
    ...content 
</div>