Basic jQuery slideUp und slideDown macht mich verrückt!

Question

Meine jQuery-Kenntnisse sind normalerweise ziemlich gut, aber das hier macht mich fertig verrückt!

Es ist ein ziemlich einfaches Akkordeon, das ich von Grund auf neu programmiert habe. Mit jQuery 1.3.2, also sollte es keine springenden Bugs geben, aber im Grunde, wenn Sie einen Blick auf das Beispiel werfen:

http://www.mizudesign.com/jquery/accordian/basic.html

Ich zeige die Höhe für das Ziel-Div auf der rechten Seite an - wenn es Text enthält, denkt es, er sei kürzer als er ist und springt. Wenn es ein Bild ist, gibt es kein Problem.

Ich kann nicht herausfinden, was ich falsch mache - es liegt offensichtlich an der CSS irgendwo, aber ich habe alle üblichen Verdächtigen ausprobiert, wie display:block

Für jede Idee sind wir dankbar!

Ihr, Chris

PS Bitte verzeihen Sie die Art des Quellcodes, ich habe ihn herausgerissen Projekt, an dem ich arbeite, herausgerissen, so dass er einige Divs enthält, die nicht wirklich dort sein müssen.

Answer 1

Mein Problem ist, dass ich eine reaktionsfähiges Design Ich weiß nicht, wie breit oder hoch mein Element sein soll. Nach dem Lesen dieses Blogbeitrags http://www.bennadel.com/blog/2263-Use-jQuery-s-SlideDown-With-Fixed-Width-Elements-To-Prevent-Jumping.htm Ich habe festgestellt, dass jQuery die Position meines Elements in eine feste Position geändert und das Layout des Elements durcheinander gebracht hat. Ich fügte das Folgende zu meinem CSS für das Element hinzu und bemerkte keine schlechten Nebeneffekte im IE7+, Firefox, Chrome und Safari.

display: none;  
overflow: hidden;
position: relative !important;

Answer 2

Das Ersetzen der Werte margin-top und margin-bottom durch die Werte padding-top und padding-bottom hat bei mir funktioniert. Vergessen Sie nicht, den margin-Wert danach auf 0 zu setzen.

Answer 3

Das hat bei mir funktioniert:

$(this).pathtoslidingelementhere.width($(this).parent().width());

Answer 4

Das Problem ist auf den IE (Quirks Mode) zurückzuführen, der versucht, "height:0px" zu rendern.

Die Lösung: Höhe auf 1 (nicht 0) animieren, dann ausblenden und Höhe zurücksetzen:

// slideUp for all browsers
$("div").animate({ height:1 },{ complete:function(){
        // hide last pixel and reset height
        $(this).hide().css({ height:"" });
    } 
});

Answer 5

Für mich war das Problem die Marge (oder padding) auf dem div zu zeigen / verstecken mit Folie, aber ich brauchte, um Marge (oder padding) zu geben, dass div. Ich löste mit diesem Trick:

  .slide-div:before{
    content: " ";
    display: block;
    margin-top: 15px;
  }