Question

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

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

它有一个选项列表，可以在点击时打开并调整大小并定位以使其与触发元素对齐。

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

是否有任何事件要绑定到位置或偏移的变化？

谢谢。梅德。

Answer 1

语义上，选项应该是“select元素”的子元素。就像你知道的那样，使用传统的select。

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

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

您可能只是将HTML视为一个简单的示例，但您最好使用标准HTML标记（例如div，ul，无论哪种情况最适合您的情况）附属于它的特殊课程。