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 存储库（这是官方存储库）检查源代码。

GitHub 的版本使用 jQuery UI 中的 jquery.ui.position，它允许您指定相对于元素的菜单显示位置（“顶部顶部”、“左侧底部”...）以及还允许碰撞检测。

来自文档：

当定位元素在某个方向溢出窗口时，
将其移动到另一个位置。与 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 ""
    }
});

检查以下内容 问题对类似问题的解释（方法_refreshPosition()似乎不再存在，但选项位置当然是还在那里）。