Показать элемент относительно другого с помощью jQuery

Question

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

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

Спасибо заранее!

Answer 1

<input type="button" id="btn" value="Choose Something" /> 

<div id="select"> 
    ... 
</div> 

с CSS:

#select { position: absolute; display: none; } 

и Javascript:

$("#btn").click(function() { 
    var sel = $("#select"); 
    var pos = $("#btn").offset(); 
    if (sel.is(":hidden")) { 
    sel.attr({ 
     top: pos.top + 20, 
     left: pos.left 
    }); 
    sel.show(); 
    } else { 
    sel.hide(); 
    } 
}); 

В принципе, вы абсолютно позиционируете плавающий div на r выньте его из обычного потока, а затем используйте offset(), чтобы выяснить, куда его поместить относительно кнопки.

Answer 2

Вы можете получить позицию кнопки by using .offset()

Например:

$("#myButton").click(function() { 
    var o = $(this).offset(); 
    $("#myDiv").css({'position': 'absolute','left':o.left,'top',o.top}); 
}); 

Это расположить его прямо на верхней части кнопки, просто настроить, что левый/верх, где в отношении вы хотите идти.

Например, чтобы поместить его под кнопкой изменить верхнюю часть, чтобы 'top': o.top + $(this).height() или правой справа от кнопки: 'left':o.left + $(this).width()

Answer 3

Вы должны установить и установить позицию с помощью .offset(), если элемент расположен иерархически.

Для example2

<input type="button" id="myButton" value="Choose Something" 
    style="position: absolute; top: 100px;" /> 
<div style="position: absolute; top: 200px;">parent div 
    <div id="myDiv" style="position: absolute; top: 20px;">child div</div> 
</div> 

$("#myButton").click(function() { 
    var o = $(this).offset(); 
    $("#myDiv").offset({ 
     'left': o.left, 
     'top': o.top - 20 
    }); 
}); 

Вот это скрипка: http://jsfiddle.net/R5YM6/1/