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

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

如何将此浮动元素正确定位到单击的按钮附近（可能位于页面上的任何位置）

---

提前谢谢

您可以获取按钮的位置

例如：

$("#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（）

和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（）获取并设置位置

例如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
    });
});

上级部门
儿童部
$（“#我的按钮”）。单击（函数（）{
var o=$（this.offset（）；
美元（“#myDiv”）。抵销({
“左”：o左，
“top”：o.top-20
});
});

这是一把小提琴：

$("#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();
  }
});

<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
    });
});