Question

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

div.ui-selectmenu-menu离开屏幕。 This is the default Selectmenu behaviour, I guess.（如果Selectmenu靠近窗口的底部边缘，则会发生类似情况。）

我想要做的是将div.ui-selectmenu-menu向左移动，即。到Selectmenu的align it to the right edge，但只有在给定Selectmenu有问题时（我想保持所有其他菜单的默认对齐）。

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

当我打开Selectmenu时，我没有第一次得到预期的行为。当我关闭并再次打开它时，它就会起作用。

Answer 1

这是一个jQueryUi问题，不适合你。

发生了什么

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

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

在计算之前（组件初始化）：

计算后（点击时）：

因此，当您计算rightOffsetOfAnElement时，它会返回错误的＆＃34;第一次点击的值，因为下拉列表没有定位，也没有相同的大小。

解决方案

您可以使用的hack是在页面加载时单击它两次，因此它将调用calculate方法：

我个人不建议使用jQueryUi，因为它已经过时了，并且它没有按照您的意愿完成工作。它也非常大，为250kb +你可以更好地结合小组件。 例如，工具提示tippy.js为14kb，它有比jQueryUi工具提示更多的选项。

也使用Select2。让你的生活更轻松。

Answer 2

我认为您需要做的就是在位置选项上设置collision: "flip"，如下所示：

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