如果靠近边缘，选择菜单就会离开屏幕

Question

如果 Selectmenu 靠近窗口的右边缘，

div.ui-selectmenu-menu

会离开屏幕。

我猜这是默认的选择菜单行为。

（如果 Selectmenu 靠近窗口底部边缘，也会发生类似的情况。）

我想做的是将

div.ui-selectmenu-menu

向左移动一点，即。将其与 Selectmenu 的右边缘对齐，但前提是给定的 Selectmenu 有问题（我想保留所有其他菜单的默认对齐方式）。

我想出了某种解决方案，但它并没有100%有效： https://jsfiddle.net/rh6gjkpt/

当我第一次打开选择菜单时，我没有得到预期的行为。当我关闭并再次打开它时，它就可以工作了。

Answer 1

我认为您需要做的就是在位置选项上设置

collision: "flip"

，如下所示：

$("select").selectmenu({
    "position": {
        my: "left top",
        at: "left bottom",
        collision: "flip"
    }
});

小提琴：https://jsfiddle.net/rh6gjkpt/6/

Answer 2

这是一个 jQueryUi 问题，这不取决于你。

发生了什么事

当您创建 Ui 组件时，它只会呈现您所看到的选择框。当您第一次单击组件时，它然后计算元素的宽度。

这就是为什么您第一次看到一个溢出的列表，然后当您再次打开它时它会分成多行。

计算前(组件初始化):

计算后（点击时）：

因此，当您计算

rightOffsetOfAnElement

时，它会为第一次单击返回“错误”值，因为下拉列表的位置和大小都不相同。

解决方案

您可以使用的技巧是在页面加载时单击它两次，这样它将调用计算方法：

JS 小提琴

推荐

我个人不建议使用 jQueryUi，因为它很旧并且不能完成您所看到的工作。而且它确实很大，有 250kb+，你会更幸运地组合小组件。 例如工具提示 tippy.js 为 14kb，它比 jQueryUi 工具提示有更多选项。

还可以使用选择2。让您的生活更轻松。