jQuery toggelte tr Elemente wanken nach unten Seite

Question

Der Kern meines Problems besteht darin, dass ich eine Tabelle habe, in der jede gerade Zeile versteckt ist und die Sichtbarkeit mit einem Anker in der darüber liegenden Zeile umgeschaltet wird. Dies funktioniert korrekt, aber in einigen Browsern (Safari und Chrome) bewegt sich der tr unter dem gerade erschienenen weiter nach unten, als er sollte.

Wenn Sie den versteckten tr umschalten, driftet der nächste Geschwister die Seite herunter.

ist hier ein bloßen Knochen-Code, der dieses Problem zeigt (erfordert 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> 

Der obige Code scheint in Opera und Firefox zu funktionieren, aber das Problem oben geschieht in Safari und Chrome erwähnt. (Habe noch nicht in IE getestet). Das macht mich verdächtig, dass es sich um ein Webkit-Problem handelt.

Hat noch jemand das Problem gefunden? Gibt es eine Problemumgehung?

Answer 1

Ich kann Ihr Problem in Chrome mit jQuery 1.4.2, aber nicht mit 1.4.4 reproduzieren. Mit 1.4.4 wird die Tabellenzeile überhaupt nicht animiert, sondern nur ein- und ausgeschaltet (nach einer Verzögerung).

Das Verhalten von slideToggle auf Tabellenelemente scheint etwas undefiniert zu sein. Als Abhilfe können ein <div> um Ihre <td> Inhalte platzieren und slideToggle auf dieser Stelle nennen:

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