4

常に画面に表示しておく必要がある JQuery メニューがあります。したがって、子メニューがウィンドウの下部に重なる場合は、「上」に移動する必要があります。

例えばここに画像の説明を入力

小さいメニュー (例: 5 項目以下) では問題なく動作するようですが、奇妙に大きなメニューではシフトアップしないようです。

jsfiddle の例- メニュー項目 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 のバグですか? 誰でも回避策を提案できますか?

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 に答える