jQuery bascule des éléments tr vers le bas page

Question

L'essentiel de mon problème est que j'ai une table que chaque rangée paire est cachée, et la visibilité est basculée à l'aide d'une ancre sur la ligne ci-dessus. Cela fonctionne correctement, mais dans certains navigateurs (Safari et Chrome) le tr inférieur à celui qui vient d'apparaître descend plus loin qu'il aurait dû.

Si vous continuez à basculer vers la gauche, le prochain frère dérive sur la page.

Voici un code bare os qui montre ce problème (nécessite jquery)

<script type="text/javascript"> 
    $(function() { //document ready 

    $('.details').hide(); 

    $('.show_hide').click(function(event){ 
    event.preventDefault(); 
    $(this).parents('tr').next().slideToggle('slow'); 
    }); 


    }); //end doc ready 
</script> 

<style> 
    table { 
    width: 500px; 
    } 

    .main td { 
    width: 33%; 
    } 
</style> 

<table> 
    <tr class="main"> 
    <td>Title</td> 
    <td>Some Detail</td> 
    <td><a href="#" class="show_hide">Show/Hide</a></td> 
    </tr> 

    <tr class="details"> 
    <td> 
    Sed scelerisque, tellus non auctor pretium, felis massa vehicula sem, quis vehicula nulla dolor eget justo. Pellentesque porttitor aliquet metus a accumsan. Aenean luctus, lacus in tristique imperdiet, nulla ipsum dignissim massa, quis laoreet eros justo eu nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed purus nisi, at venenatis tellus. Praesent id magna ac dui congue convallis. Duis sit amet arcu eu ipsum tincidunt fermentum. Praesent mollis, eros sit amet auctor iaculis, mi elit aliquet elit, at rhoncus elit urna nec magna. Vestibulum iaculis fringilla diam, in rhoncus tortor blandit id. Nam id leo eros, et posuere massa. Morbi fermentum egestas nisl, et pharetra urna convallis viverra. Maecenas id massa nulla. Pellentesque eget urna vel diam interdum sollicitudin sit amet in massa. 
    </td> 
    </tr> 

    <tr class="main"> 
    <td>Title 2</td> 
    <td>Some Detail 2</td> 
    <td><a href="#" class="show_hide">Show/Hide</a></td> 
    </tr> 

    <tr class="details"> 
    <td> 
    Sed scelerisque, tellus non auctor pretium, felis massa vehicula sem, quis vehicula nulla dolor eget justo. Pellentesque porttitor aliquet metus a accumsan. Aenean luctus, lacus in tristique imperdiet, nulla ipsum dignissim massa, quis laoreet eros justo eu nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed purus nisi, at venenatis tellus. Praesent id magna ac dui congue convallis. Duis sit amet arcu eu ipsum tincidunt fermentum. Praesent mollis, eros sit amet auctor iaculis, mi elit aliquet elit, at rhoncus elit urna nec magna. Vestibulum iaculis fringilla diam, in rhoncus tortor blandit id. Nam id leo eros, et posuere massa. Morbi fermentum egestas nisl, et pharetra urna convallis viverra. Maecenas id massa nulla. Pellentesque eget urna vel diam interdum sollicitudin sit amet in massa. 
    </td> 
    </tr> 
</table> 

Le code ci-dessus semble fonctionner correctement dans Firefox et Opera, mais la question mentionnée ci-dessus se produit dans Safari et Chrome. (N'a pas encore testé dans IE). Cela me rend suspect qu'il s'agit d'un problème lié au Webkit.

Quelqu'un d'autre a-t-il trouvé le problème? Y at-il un travail autour?

Answer 1

Je suis capable de reproduire votre problème dans Chrome avec jQuery 1.4.2, mais pas avec 1.4.4. En fait, avec 1.4.4, la ligne de la table ne s'anime pas du tout - à la place elle bascule simplement et après (après un délai).

Le comportement de slideToggle sur les éléments de table semble être quelque peu indéfini. Pour contourner ce problème, placez un <div> autour de votre <td> contenu et appeler slideToggle sur ce lieu:

<tr> 
    <td colspan="3"> 
     <div class="details"> 
      Sed scelerisque... 
     </div> 
    </td> 
</tr>