jQuery UI .position() zur dynamischen Anpassung

Question

Ich versuche gerade, ein Popup zu erscheinen, das rechts neben einem bestimmten Menüeintrag erscheint, wenn ich den Mauszeiger darüber bewege. Ich habe die .position() -Eigenschaft von jQuery UI dazu verwendet, und es funktioniert problemlos mit statischen Elementen. Allerdings binde ich das Popup auf ein scrollbares Menü und ich möchte, dass das Popup weiterhin direkt neben dem Menüelement erscheint, auch wenn ich ein wenig blättern muss. Leider wird die Position des Popup-Fensters komplett verworfen, wenn das Host-Element per Scroll bewegt wird. Wie kann ich .position() dynamisch verwenden, um sicherzustellen, dass sich das Popup immer rechts neben dem Menüelement befindet? Gibt es eine bessere Möglichkeit, die Position eines Elements dynamisch mit einer anderen zu verknüpfen? Unten ist mein Code.

<div id="menu" style="overflow-y: scroll; ..."> 
    <p id="menu-item-1"></p> 
    ... 
</div> 

<div id="popup-container" style="display: none; ...">...</div> 

<script> 
    $("#menu-item-1").hover(function(){ 
     $("#popup-container").position({ 
      my: "left top", 
      at: "left+160 top", 
      of: $("#menu-item-1") 
     }); 
     $("#popup-container").toggle(); 
    }); 
</script> 

Answer 1

Nichts. Herausgefunden. .position() kann versteckte Elemente nicht positionieren. Wenn ich also das .toggle() Objekt über das .position() Objekt setze, das das Problem behebt.