Araç çubuğu gibi bir menü içeren gizli bir DİV var.

Fareyi üzerine geldiğinde menü DİV göstermek için etkinleştirilmiş olan Salak bir dizi var.

Yapılı-içinde aktif üst sağ (fare) menü DİV hareket edecek olan işlevi bir DİV var mı? $(menu).position("topright", targetEl); gibi bir şey arıyorum

tl;dr:(**14) deneyin

Eğer aşağıdaki HTML varsa:

<div id="menu" style="display: none;">
   <!-- menu stuff in here -->
   <ul><li>Menu item</li></ul>
</div>

<div class="parent">Hover over me to show the menu here</div>

daha sonra aşağıdaki JavaScript kodu kullanabilirsiniz:

$(".parent").mouseover(function() {
    // .position() uses position relative to the offset parent, 
    var pos = $(this).position();

    // .outerWidth() takes into account border and padding.
    var width = $(this).outerWidth();

    //show the menu directly over the placeholder
    $("#menu").css({
        position: "absolute",
        top: pos.top   "px",
        left: (pos.left   width)   "px"
    }).show();
});

Ama bu bir işe yaramaz.

Bu kadar uzun menü olarak çalışacak ve aynı tutucu ofset veli var. Eğer DOM #menu öğe bakımı iç içe CSS kuralları yok, yok, kullanın:

$(this).append($("#menu"));

hatta önce o #menu eleman pozisyonu.

Ama hala çalışmıyor!

Bu yaklaşım ile çalışmayan garip bir düzen olabilir. Bu durumda, akla gelebilecek her olasılığa işleyen jQuery.ui's position plugin answer aşağıda belirtildiği gibi) kullanın. position({...}); gizli elemanları pozisyon yok eklenti çağırmadan önce show() menü öğesi gerekecek unutmayın.

Notlar 3 yıl sonra 2012 yılında güncelleme:

(Özgün çözüm gelecek kuşaklar için here arşivlenir)

Yani, burada alırken yöntemi ideal olmaktan uzak olduğu ortaya çıktı. Özellikle, eğer başarısız olur:

• menünün ofset üst tutucu kaydır ebeveyn değildir
• yer tutucu kenarlık/dolgu vardır

İkinci durum buraya doğru değerleri bulmak çok daha kolay hale getiren neyse ki, yöntemleri (position() outerWidth()) 1.2.6 da sunulan bir WordPress kullanmak. , appendönceki durum ıng yer tutucu işleri için Menü öğesi (ama CSS kuralları yuvalama göre kesilir).