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

Question

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

例如

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

jsfiddle example - 比较菜单项C＆gt; 1E到C＆gt; 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”：首先应用翻转逻辑，放置元素   无论哪一方都允许更多元素可见。然后适合   应用逻辑以确保尽可能多的元素可见   可能的。