jquery bascule sur l'élément dt fonctionnant dans Firefox mais pas d'autres navigateurs

Question

Les travaux suivants dans Firefox, mais dans aucun autre navigateur. La relation parent-enfant de <dl> est-elle différente dans les différents navigateurs?

$('dd').parent().find('h3').toggle(
    function(){ 
     $(this).next('dd').slideDown(500); 
    }, 
    function(){ 
     $(this).next('dd').slideUp(500); 
    } 
); 

HTML ressemble à:

<dt><h3>stuff to be clicked</h3></dt> 
<dd><p>stuff in dd might look like this with internal elements</p> 
    <ul> 
     <li>stuff1</li> 
     <li>stuff2 </li> 
     <li>stuff3 </li> 
    </ul> 
</dd> 

Answer 1

Votre logique de fonction est faux, mais il travaille dans firefox car il traite de votre code HTML différent que les autres navigateurs.

La fonction next() examine le frère ou la sœur immédiate de l'élément en question. Vous faites cela sur l'élément h3:

<dt><h3>stuff to be clicked</h3></dt> 

Comme vous pouvez le voir, il n'y a pas de frères et sœurs immédiats à l'étiquette h3. Il n'a pas de frère et soeur (et donc pas de next()).

Alors, pourquoi Firefox fonctionne-t-il? Parce que votre HTML est également invalide. Selon le specifications of the DT tag, la balise ne prend que les éléments inline et la balise h3 n'est pas une balise en ligne. Pourquoi est-ce important? Parce que différents navigateurs traitent différemment avec des documents invalides. Firefox, dans ce cas, lance le tag h3 ou la balise dt, en laissant votre structure du document comme celui-ci:

<dt></dt> 
<h3>stuff to be clicked</h3> 
<dd><p>stuff in dd might look like this with internal elements</p> 
    <ul> 
     <li>stuff1</li> 
     <li>stuff2 </li> 
     <li>stuff3 </li> 
    </ul> 
</dd> 

Ainsi, en cas de Firefox, l'élément h3 devient réellement frères et soeurs avec le tag dd et votre code travaux. Toutefois, dans d'autres navigateurs (tels que Chrome, qui est testé sur), la balise h3 reste à l'intérieur de la balise dt et votre code ne fonctionne pas.