Question

如果用户点击按钮，当我弹出一个小菜单时，我正试图利用jQuery-UI Position处理冲突的能力。基本上，如果他们在屏幕上的某个地方滚动，并且菜单会在按钮上方但不在下方，则会自动“翻转”菜单。

这似乎非常简单和超级优雅：

$('#bmenu').click(function(){
  $('#button_submenu').position({
   'my':'left top',
   'at':'center bottom',
   'of':$('#bmenu'),
   'collision':'fit flip'
 }).toggle();
});

$('#bmenu').button({ //prettify the button
  icons: {
      primary: 'ui-icon-triangle-1-s'
  },
  text: false
});

他们点击菜单，定位子菜单，可能翻转或其他任何内容，然后将其切换到视图中。

我发现的一个关键问题是：如果您在页面上向下滚动，然后点击菜单，菜单会以某种方式显示偏移。奇怪的是，如果你不使用切换（或显示/隐藏），position（）可以很好地工作。

这是一些标记：

<style type="text/css" media="screen">
/*making the button less space-hungry*/
.ui-button-icon-only { font-size:46%; }

/*menu*/
#button_submenu {
    display:block;
    position:absolute;
    list-style: none;
    margin:0;
    z-index:9999;
}
/*menu items have a border*/
#button_submenu li {
    border-top: 1px solid #CCC;}
#button_submenu li:hover { background-color:white; }
/*except the first one*/
#button_submenu li:first-child { border-top: none;}
/*style the actual items*/
#button_submenu li a {
    white-space:nowrap;
    text-align:left;
    padding: 4px;
}
</style>
<div style="height:100px"></div>
<button id="bmenu">Menu</button>
<ul class="ui-state-default ui-corner-all" id="button_submenu">
    <li><a href="#">Show Site Navigation</a></li>
    <li><a href="#">Add Boxes:</a></li>
    <li><a href="#">Add Boxes:</a></li>
    <li><a href="#">Add Boxes:</a></li>
    <li><a href="#">Add Boxes:</a></li>
    <li><a href="#">Add Boxes:</a></li>
    <li><a href="#">Add Boxes:</a></li>    
</ul>
<div style="height:800px"></div>

here is a jsfiddle证明了这个问题。我注意到的是，如果您制作#button_submenu display:block并摆脱toggle()，这一切都能正常运作。还要注意我的演示没有打开碰撞，因为我怀疑这只是一个红鲱鱼 - 基本定位无论如何都没有工作，可能修复一个，修复另一个？

编辑tldr版本：click here，向下滚动，点击按钮，为什么疯狂的菜单位置？

Answer 1

位置实用程序旨在调用一次，而不是每次单击都刷新，因此它应如下所示：

$('#button_submenu').position({
  'my':'left top', 
  'at':'center bottom', 
  'of': '#bmenu',
  'collision':'none'
});
$('#bmenu').click(function(){
  $('#button_submenu').toggle();
});

Here's the updated/random-offset-free version：）

Answer 2

如果在toggle()之前拨打position()，则不会发生奇怪的偏移行为。

$('#button_submenu').toggle().position({
    'my':'left top',
    'at':'center bottom',
    'of':$('#bmenu'),
    'collision':'none'
});

基本上，这允许您即时定位子菜单（对于窗口调整大小非常方便）。

使用带有show / hide的jQuery-UI Position实用程序似乎会导致随机偏移

2 个答案: