Làm cách nào để định vị một phần tử so với phần tử khác bằng jQuery?

Tôi có một DIV ẩn chứa menu giống như thanh công cụ.

Tôi có một số DIV được kích hoạt để hiển thị menu DIV khi chuột di chuyển qua chúng.

Có chức năng tích hợp nào sẽ di chuyển menu DIV sang phía trên bên phải của DIV đang hoạt động (chuột di chuột) không? Tôi đang tìm kiếm một cái gì đó như$(menu).position("topright", targetEl);

LƯU Ý: Điều này yêu cầu UI UI (không chỉ jQuery).

Bây giờ bạn có thể sử dụng:

$("#my_div").position({
    my:        "left top",
    at:        "left bottom",
    of:        this, // or $("#otherdiv")
    collision: "fit"
});

Để định vị nhanh ( Giao diện người dùng / Vị trí jQuery ).

Bạn có thể tải xuống jQuery UI tại đây .

tl; dr: (thử ở đây )

Nếu bạn có HTML sau:

<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>

sau đó bạn có thể sử dụng mã JavaScript sau:

$(".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();
});

Nhưng nó không hoạt động!

Điều này sẽ hoạt động miễn là menu và trình giữ chỗ có cùng cha mẹ bù. Nếu họ không và bạn không có các quy tắc CSS lồng nhau, quan tâm đến #menuphần tử trong DOM , hãy sử dụng:

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

ngay trước dòng định vị #menuphần tử.

Nhưng nó vẫn không hoạt động!

Bạn có thể có một số bố cục kỳ lạ không hoạt động với phương pháp này. Trong trường hợp đó, chỉ cần sử dụng plugin vị trí của jQuery.ui (như được đề cập trong câu trả lời bên dưới), xử lý mọi tình huống có thể hiểu được. Lưu ý rằng bạn sẽ phải vào show()phần tử menu trước khi gọi position({...}); các plugin không thể định vị các yếu tố ẩn.

Cập nhật ghi chú 3 năm sau vào năm 2012:

(Giải pháp ban đầu được lưu trữ ở đây cho hậu thế)

Vì vậy, nó chỉ ra rằng phương pháp ban đầu tôi có ở đây là xa lý tưởng. Cụ thể, nó sẽ thất bại nếu:

• cha mẹ bù của menu không phải là cha mẹ bù của giữ chỗ
• trình giữ chỗ có đường viền / phần đệm

May mắn thay, jQuery đã giới thiệu các phương thức ( position()và outerWidth()) trở lại trong 1.2.6, giúp cho việc tìm kiếm các giá trị phù hợp trong trường hợp sau ở đây dễ dàng hơn rất nhiều. Đối với trường hợp trước, appending phần tử menu để giữ chỗ hoạt động (nhưng sẽ phá vỡ các quy tắc CSS dựa trên lồng nhau).

Đây là những gì làm việc cho tôi cuối cùng.

var showMenu = function(el, menu) {
    //get the position of the placeholder element  
    var pos = $(el).offset();    
    var eWidth = $(el).outerWidth();
    var mWidth = $(menu).outerWidth();
    var left = (pos.left + eWidth - mWidth) + "px";
    var top = 3+pos.top + "px";
    //show the menu directly over the placeholder  
    $(menu).css( { 
        position: 'absolute',
        zIndex: 5000,
        left: left, 
        top: top
    } );

    $(menu).hide().fadeIn();
};

Đây là một hàm jQuery tôi đã viết giúp tôi định vị các phần tử.

Dưới đây là một ví dụ sử dụng:

$(document).ready(function() {
  $('#el1').position('#el2', {
    anchor: ['br', 'tr'],
    offset: [-5, 5]
  });
});

Mã ở trên sắp xếp phía dưới bên phải của # el1 với phía trên bên phải của # el2. ['cc', 'cc'] sẽ căn giữa # el1 trong # el2. Đảm bảo rằng # el1 có css vị trí: tuyệt đối và chỉ số z: 10000 (hoặc một số thực sự lớn) để giữ nó ở đầu.

Tùy chọn offset cho phép bạn chỉnh các tọa độ theo một số pixel được chỉ định.

Mã nguồn dưới đây:

jQuery.fn.getBox = function() {
  return {
    left: $(this).offset().left,
    top: $(this).offset().top,
    width: $(this).outerWidth(),
    height: $(this).outerHeight()
  };
}

jQuery.fn.position = function(target, options) {
  var anchorOffsets = {t: 0, l: 0, c: 0.5, b: 1, r: 1};
  var defaults = {
    anchor: ['tl', 'tl'],
    animate: false,
    offset: [0, 0]
  };
  options = $.extend(defaults, options);

  var targetBox = $(target).getBox();
  var sourceBox = $(this).getBox();

  //origin is at the top-left of the target element
  var left = targetBox.left;
  var top = targetBox.top;

  //alignment with respect to source
  top -= anchorOffsets[options.anchor[0].charAt(0)] * sourceBox.height;
  left -= anchorOffsets[options.anchor[0].charAt(1)] * sourceBox.width;

  //alignment with respect to target
  top += anchorOffsets[options.anchor[1].charAt(0)] * targetBox.height;
  left += anchorOffsets[options.anchor[1].charAt(1)] * targetBox.width;

  //add offset to final coordinates
  left += options.offset[0];
  top += options.offset[1];

  $(this).css({
    left: left + 'px',
    top: top + 'px'
  });

}

Tại sao phức tạp quá nhiều? Giải pháp rất đơn giản

css:

.active-div{
position:relative;
}

.menu-div{
position:absolute;
top:0;
right:0;
display:none;
}

jquery:

$(function(){
    $(".active-div").hover(function(){
    $(".menu-div").prependTo(".active-div").show();
    },function(){$(".menu-div").hide();
})

Nó hoạt động ngay cả khi,

• Hai div đặt ở bất cứ nơi nào khác
• Trình duyệt kích thước lại

Bạn có thể sử dụng plugin jQuery PositionCalculator

Plugin đó cũng bao gồm xử lý va chạm (lật), vì vậy menu giống như thanh công cụ có thể được đặt ở vị trí có thể nhìn thấy.

$(".placeholder").on('mouseover', function() {
    var $menu = $("#menu").show();// result for hidden element would be incorrect
    var pos = $.PositionCalculator( {
        target: this,
        targetAt: "top right",
        item: $menu,
        itemAt: "top left",
        flip: "both"
    }).calculate();

    $menu.css({
        top: parseInt($menu.css('top')) + pos.moveBy.y + "px",
        left: parseInt($menu.css('left')) + pos.moveBy.x + "px"
    });
});

cho đánh dấu đó:

<ul class="popup" id="menu">
    <li>Menu item</li>
    <li>Menu item</li>
    <li>Menu item</li>
</ul>

<div class="placeholder">placeholder 1</div>
<div class="placeholder">placeholder 2</div>

Đây là câu đố: http://jsfiddle.net/QrrpB/1657/

Một cái gì đó như thế này?

$(menu).css("top", targetE1.y + "px"); 
$(menu).css("left", targetE1.x - widthOfMenu + "px");

Điều này làm việc cho tôi:

var posPersonTooltip = function(event) {
var tPosX = event.pageX - 5;
var tPosY = event.pageY + 10;
$('#personTooltipContainer').css({top: tPosY, left: tPosX});