jQuery UI 选择菜单打破了布局

Question

我正在使用这个插件：http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/index.html（下拉样式）

它运行良好，但是当我在页面底部添加一个选择菜单时，会发生这种情况：

如何解决此问题，当SelectMenu在底部，下拉菜单上方而不是以下？

我使用的 JS：

$('select').not("select.multiple").selectmenu({
    style: 'dropdown',
    transferClasses: true,
    width: null
});

Answer 1

我认为您使用的版本不是最新的。您应该从GitHub repository 中查看源代码，这是官方存储库。

来自 GitHub 的版本使用来自 jQuery UI 的 jquery.ui.position，它允许您指定相对于元素显示菜单的位置（“top top”、“left bottom”.. .) 并且还允许碰撞检测。

来自documentation：

当定位元素在某个方向溢出窗口时， 将其移动到另一个位置。类似于 my 和 at，这接受 水平/垂直的单个值或一对，例如。 “翻转”，“适合”， “适合翻转”，“不适合”。

所以你宁愿这样使用插件：

$('#myelement').selectmenu({
    ...
    position: {
        my: "left top", // default
        at: "left bottom", // default

        // "flip" will show the menu opposite side if there
        // is not enough available space

        collision: "flip"  // default is ""
    }
});

检查以下question 以了解解释的类似问题（_refreshPosition() 方法似乎不再存在，但选项位置当然仍然存在）。