如何阻止我的 JQuery 菜单离开屏幕以获得更大的菜单？

Question

我有一个 JQuery 菜单，我需要始终保持在屏幕上可见。因此，如果子菜单与窗口底部重叠，它应该“向上”移动。

例如

它似乎适用于较小的菜单（例如 5 项或更少），但奇怪的是较大的菜单似乎永远不会向上移动。

jsfiddle example- 比较菜单项 C>1E 到 C>1F（您可能需要调整窗口大小，以便它们实际上与底部重叠）

即

HTML：

<div id="container" style="width: 250px;">
          <ul id="filter-menu-button-menu">
            <li><a href="#"><span class="ui-icon ui-icon-disk"></span>A</a></li>
            <li><a href="#"><span class="ui-icon ui-icon-disk"></span>B</a></li>
            <li><a href="#"><span class="ui-icon ui-icon-folder-open"></span>C</a>
              <ul>
                <li><a href="#">1A</a></li>  
                <li><a href="#">1B</a></li> 
                  <li><a href="#">1C</a></li> 
                  <li><a href="#">1D</a></li> 
                  <li><a href="#">1E</a>
                      <ul>
                  <li><span class="ui-icon ui-icon-trash"></span><a href="#">1</a></li>
                      <li><span class="ui-icon ui-icon-trash"></span><a href="#">2</a></li>
                      <li><span class="ui-icon ui-icon-trash"></span><a href="#">3</a></li>
                      <li><span class="ui-icon ui-icon-trash"></span><a href="#">4</a></li>
                          <li><span class="ui-icon ui-icon-trash"></span><a href="#">5</a></li>
                                        <li><span class="ui-icon ui-icon-trash"></span><a href="#">6</a></li>

                      </ul>
                  </li> 
                  <li><a href="#">1F</a>
                  <ul>
                     <li><span class="ui-icon ui-icon-trash"></span><a href="#">1</a></li>
                                        <li><span class="ui-icon ui-icon-trash"></span><a href="#">2</a></li>
                                        <li><span class="ui-icon ui-icon-trash"></span><a href="#">3</a></li>
                                        <li><span class="ui-icon ui-icon-trash"></span><a href="#">4</a></li>
                                        <li><span class="ui-icon ui-icon-trash"></span><a href="#">5</a></li>                   
                  </ul>
                </li>
              </ul>
            </li>
          </ul> 
</div>

CSS：

$('#filter-menu-button-menu').menu({
    "position": { my: "right top", at: "left top" }
});

谁能说明为什么会这样？它是 JQuery UI 中的错误吗？任何人都可以提出解决方法吗？

Answer 1

您可能想查看.position() 的碰撞选项

Working Example

$('#filter-menu-button-menu').menu({
    "position": {
        my: "right top",
        at: "left top",
        collision: 'flipfit'
    }
});

"flipfit"：首先应用翻转逻辑，将元素放在 哪一侧允许更多元素可见。然后合身 应用逻辑以确保尽可能多的元素可见 可能。