2

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

如何正确定位此浮动元素与单击的按钮相邻（可能位于页面上的任何位置）？

提前致谢！！

4

3 回答 3

5

您可以通过使用获取按钮的位置.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()

于 2010-03-04T14:34:38.783 回答
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 以将其从正常流程中移除，然后用于offset()确定将其放置在相对于按钮的位置。

于 2010-03-04T14:35:25.133 回答
1

您应该使用 .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/

于 2014-02-01T09:38:43.573 回答