Динамическое позиционирование элементов с использованием jQuery

Question

Я работаю над строкой меню, каждый элемент строки меню является изображением, когда пользователь наводит курсор мыши на элемент меню, появляется div с подменю.

Я хочу разместить div непосредственно под соответствующим элементом изображения (без пробела, и div будет зависать над всеми элементами) с выравниванием по правой стороне, что означает, что правый верхний угол div должен находиться под нижним правым углом изображения,

Поскольку я не могу и не хочу жестко кодировать положение div, я хочу сделать это динамически.

Пока у меня есть это:

$('img').each(function(){                     
   jQuery(this).mouseenter(function(){
     var menuItem = $('#' + this.id + '_menu'); //get the needed div 
     var imgRight = this.offset() + this.width();


   });
 });

Answer 1

Метод offset() имеет свойства top и left, их необходимо использовать, например:

var imgRight = this.offset().left + this.width();
var imgTop = this.offset().top + this.height();

После этого вам нужно будет указать absolute позиционирование DIV, чтобы разместить их под изображениями:

menuItem.css({
  position:'absolute',
  top: imgTop,
  left: imgLeft,
  zIndex:5000
});

Итак, ваш код становится:

$('img').each(function(){                     
   jQuery(this).mouseenter(function(){

   var menuItem = $('#' + this.id + '_menu'); //get the needed div 
   var imgRight = this.offset().left + this.width();
   var imgTop = this.offset().top + this.height();

     menuItem.css({
       position:'absolute',
       top: imgTop,
       left: imgLeft,
       zIndex:5000
     });

     // now show the corresponding div
     menuItem.show('slow');

   });
});

Подробнее:

http://api.jquery.com/offset/

Answer 2

Вам не нужно жестко кодировать или вычислять положение этих предметов. Любое из следующих правил CSS должно достичь вашей цели: position: relative; right: 0 или float: right:.

Было бы неплохо увидеть часть вашей разметки для дополнительного тестирования. www.jsfiddle.net - отличный ресурс для этого.

Answer 3

Есть 2 способа сделать это: правильный путь или обманчивый путь ... Правильный путь: вам нужно получить верх и клиентскую высоту активирующего объекта - клиентские высоты, нет проблем, просто позвоните - ноtop означает, что вы также должны получить to всех родительских объектов - используйте это:

function J_pos(o)
{
    var x,y;
    y=o.offsetTop;
    x=o.offsetLeft;
    o=o.offsetParent;
    while(o)
    {
        y+=o.offsetTop;
        x+=o.offsetLeft;
        o=o.offsetParent;
    }
    return [x,y];
};

Теперь высота и клиентская высота вы делаете это:не так динамично - но быстро): поместите тег типа <span> вокруг активирующего (наведения мыши) объекта.Сделайте это относительно положения.Поместите <div> внутри него:

<div id="ABC" style="position:absolute;left:0;display:none">

Теперь при наведении курсора мыши поместите document.getElementById("ABC").style.display="" и bottom:0 - бум, ребенок, посыпанный пыльюНедостатком этого является то, что вы должны делать это вручную для каждого экземпляра, но если у вас есть только 3 или около того бинго.