当前位置：文江博客话题详情

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

发布于 2024-08-23 14:55:23 字数 138 浏览 11 评论 0原文

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

如何正确地将这个浮动元素放置在单击的按钮（可能位于页面上的任何位置）附近？

提前致谢！！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蹲墙角沉默 2024-08-30 14:55:23

您可以使用 .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()

You can get the position of the button by using .offset()

For example:

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

This would position it right on top of the button, just adjust that left/top wherever in relation you want it to go.

For example to place it below the button change the top portion to 'top': o.top + $(this).height() or to right right of the button: 'left':o.left + $(this).width()

回复收藏 0 原文

因为看清所以看轻 2024-08-30 14:55:23

<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() 找出相对于按钮的放置位置。

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

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

with CSS:

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

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

Basically you absolutely position the floating div to remove it from the normal flow and then use offset() to figure out where to put it in relation to the button.

回复收藏 0 原文

何必那么矫情 2024-08-30 14:55:23

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

You should both get and set the position using .offset(), in case the element is positioned hierarchically.

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

Here is a fiddle: http://jsfiddle.net/R5YM6/1/

回复收藏 0 原文

~没有更多了~