Utiliser l'utilitaire jQuery-UI Position avec show/hide semble provoquer des décalages aléatoires

Question

J'essaie de tirer parti de la capacité de jQuery-UI Position à gérer les collisions lorsque j'ouvre un petit menu si un utilisateur clique sur un bouton. Essentiellement, s'ils ont défilé quelque part sur l'écran, et que le menu s'ajuste au-dessus du bouton mais pas au-dessous, il fait automatiquement basculer le menu vers le haut.

Cela semble être vraiment facile et super élégant:

$('#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 
}); 

Ils cliquent sur le menu, il positionne le sous-menu, en feuilletant éventuellement ou autre, puis dans vue bascule.

Ce que j'ai trouvé est une question clé: Si vous défiler vers le bas sur la page, puis cliquez sur le menu, le menu apparaît décalage d'une certaine façon. Et la chose étrange est, si vous n'utilisez pas toggle (ou show/hide), position() fonctionne parfaitement.

Voici quelques balises:

<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> 

Et here is a jsfiddle démontrant la question. Ce que j'ai remarqué, c'est que si vous faites le #button_submenudisplay:block et se débarrasser du toggle(), tout cela fonctionne correctement. Notez aussi que ma démo n'a pas de trucs de collision allumés parce que je suspecte que c'est juste un truc de hareng - le positionnement de base ne fonctionne pas de toute façon, peut-être en réparer un, réparer l'autre?

---

EDIT pour la version tldr: click here, faites défiler vers le bas, cliquez sur le bouton, pourquoi la position de menu fou?

Answer 1

L'utilitaire de position est destinée à être appelée une fois, pas actualisé chaque clic, il devrait donc ressembler à ceci:

$('#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

Si vous appelez toggle() avant position(), l'étrange décalage le comportement ne se produit pas. Fondamentalement, cela vous permet de positionner votre sous-menu à la volée (très pratique pour les redimensionnements de fenêtre).