4

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

例如在此处输入图像描述

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

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

IE 在此处输入图像描述

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 中的错误吗？任何人都可以提出解决方法吗？

4

1 回答 1

3

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

工作示例

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

“flipfit”：首先应用翻转逻辑，将元素放置在允许更多元素可见的任何一侧。然后应用拟合逻辑以确保尽可能多的元素可见。

于 2014-05-02T15:05:04.887 回答