Question

我正在开发一个界面，要求用户可以点击一个按钮，然后我将显示一个相对于按钮定位的浮动div（您可以将其视为单击时显示的区域下拉箭头上的向下箭头。）

如何正确地将此浮动元素放置在单击的按钮旁边（可能位于页面的任何位置）？

提前致谢!!

Answer 1

您可以获取按钮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 2

<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()找出它与按钮相关的位置。

Answer 3

如果元素按层次结构定位，你应该使用.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/

使用jQuery显示相对于另一个元素的元素

3 个答案: