Показать элемент относительно другого с помощью jQuery - PullRequest
Новая
       22

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

2 голосов
/ 04 марта 2010

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

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

Заранее спасибо !!

Ответы [ 3 ]

5 голосов
/ 04 марта 2010

Вы можете получить положение кнопки , используя .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()

1 голос
/ 01 февраля 2014

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

Например2 

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

1 голос
/ 04 марта 2010 
<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, чтобы удалить его из нормального потока, а затем используете offset(), чтобы выяснить, где его разместить относительно кнопки.

...