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

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>

而这里是一个的jsfiddle演示该问题.我注意到的是,如果你做了#button_submenu display:block并摆脱了toggle(),这一切都正常.还要注意我的演示没有打开碰撞的东西,因为我怀疑这只是一个红鲱鱼 - 基本定位无论如何都没有工作,可能修复一个,修复另一个？

---

编辑tldr版本:点击这里,向下滚动,点击按钮,为什么疯狂的菜单位置？

Answer 1

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

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

这是更新/随机偏移免费版本 :)