如何用jquery检测位置的变化?

发布于 2024-12-08 16:14:42 字数 486 浏览 0 评论 0原文

我正在尝试开发一个小部件,即选择表单元素替换。它是一个块元素,因此它可能是其容器的 100%。像这样:

<element style="width: 100%">Please choose</element>
<options style="display: none">
    <option>Option 1</option>
</options>

它有一个选项列表,单击时打开,并调整大小和位置以与触发元素对齐。

现在,每当我调整窗口大小或布局中的某些内容发生变化时,我都需要重新定位选项列表。我认为我可以轻松绑定到 window.resize() 来进行 options.width() 更改。唯一的问题是如何检测元素位置的变化以重新定位选项。

是否有任何事件可以绑定到位置或偏移的变化?

谢谢。 德米特里.

I'm trying to develop a widget, that is a select form element replacement. It's a block element so it may be 100% of its container. Something like this:

<element style="width: 100%">Please choose</element>
<options style="display: none">
    <option>Option 1</option>
</options>

It has an options list that opens on click and is resized and position to align it with the trigger element.

Now whenever I resize the window or something in my layout changes I need to reposition the options list. I figured that I can easily bind to window.resize() for options.width() changes. The only one problem is how to detect changes in element position to reposition the options.

Is there any event to bind to changes in position or offset?

Thank you.
Dmitry.

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

黎夕旧梦 2024-12-15 16:14:42

从语义上讲,选项应该是“选择元素”的子元素。就像传统的 select 一样。

<element style="width: 100%">
Please choose
<options style="display: none">
    <option>Option 1</option>
</options>
</element>

这样,您就可以使用绝对定位来始终将 options 定位到相对于其父项的正确位置。为此,您只需在 element 上指定 position:relative(或者实际上除 static 之外的任何其他 position 值) )。


您可能只是将 HTML 作为一个简单的示例,但您最好使用标准 HTML 标记(例如 divul,以最适合您的情况为准) )并附有一个特殊的类。

Semantically the options should be a child of the "select element". Like, you know, with the traditional select.

<element style="width: 100%">
Please choose
<options style="display: none">
    <option>Option 1</option>
</options>
</element>

This way, you can use absolute positioning to always position options to the right place, relative to its parent. For this, you only have to specify position: relative on element (or actually any other position value than static).


It's possible that you only meant your HTML as a quick example, but you'd be better off using a standard HTML tag (like div, ul, whichever fits your case most) with a special class attached to it.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文