2012-04-01 13 views
0

Ich benutze jquery Positionierung (my, at, von), um ein div als eine Art 'Dropdown' auf eine Schaltfläche anzuzeigen. Code unten:Jquery Positionierung relativ zu einem Element, das sich bewegen kann

if ($('#myDiv').is(':hidden')) { 
    $('#myDiv').show().position({ 
     my: "left top", 
     at: "left bottom", 
     of: $("#myButton"), 
     "offset" : "0 -2px" 
    }); 

} else { 
    $('#myDiv').hide(); 
} 

Die Taste bewegen kann, während das Drop-Down-div sichtbar ist (zum Beispiel andere Inhalte/entfernt dynamisch hinzugefügt zu werden, die Taste drücken um). Das Problem ist, dass in diesem Fall nur die Schaltfläche verschoben wird und das div bleibt, sodass div nicht mehr korrekt relativ zur Schaltfläche positioniert ist. Hier

ist ein Beispiel Geige: http://jsfiddle.net/2BUZU/

Gibt es einen schön Weg, um die div haben immer den Knopf folgen?

Ich kann nicht scheinen, eine Antwort auf dieses Problem zu finden, obwohl ich sicher bin, dass ich nicht der einzige bin, der auf dieses Problem eingeht.

Danke!

+0

Können Sie eine Demo veröffentlichen? – Joseph

+0

Die Positionierung des div sollte relativ sein – Chibuzo

+0

Beispiel Demo veröffentlicht. Außerdem, Chibuzo, habe ich versucht, die Position relativ zu ändern, aber ich brauche das Dropdown-Div, das über anderen Inhalten erscheint, also glaube ich nicht, dass es funktionieren wird - es sei denn, ich habe dich missverstanden? –

Antwort

1

Ich habe dies erreicht, indem Sie einen Container div und die Animate-Funktion hinzufügen. Nicht sicher, ob dies die Art von Lösung ist, sind Sie nach ...

Siehe jsFiddle DEMO

Hoffe, es hilft!

Zweiter Vorschlag
Finden Sie die position() des myButton Element und myDiv entsprechend bewegen.

Siehe jsFiddle DEMO 2

Ich habe das Gefühl, dass Sie erreichen, was Sie die Position mit und animieren Funktionen erreichen müssen.

Wieder hoffe ich, dass Sie damit Ihrer Lösung ein wenig näher kommen.

+0

Danke Neo108. Es funktioniert nicht genau für mich; Ich brauche etwas, das basierend auf der Bewegung des Knopfes aus verschiedenen Gründen funktionieren würde, z. einige Inhalte an anderer Stelle auf der Seite werden hinzugefügt/entfernt. Aber es ist trotzdem ein nützliches Beispiel! –

+0

Ich habe das Gefühl, dass Sie mit den Positions- und Animationsfunktionen erreichen können, was Sie erreichen müssen. Bitte beachten Sie meinen zweiten Vorschlag oben - Haben Sie die Antwort bearbeitet, um sie hinzuzufügen. – neo108

+0

Danke für das zweite Demo, neo108.Aber es scheint, dass die div-Neupositionierung immer noch über den Klick ausgelöst wird, der mehr Inhalt hinzufügt (schöner, übersichtlicher Code!). –

0

Während ich möchte, dass das Dropdown-Element immer automatisch seinem Button folgt, scheint es in meinem Fall keinen einfachen Weg zu geben. Ich weiß, was bewirkt, dass sich die Taste 90% der Zeit bewegt, also wenn ich triggere, positioniere ich die div an diesem Punkt neu. Das funktioniert jetzt gut genug. Danke für die Tipps Völker.

Verwandte Themen