jquery ui position() 每次点击都会继续向下移动菜单

Question

我正在开发一个弹出菜单，由于它要进入的应用程序，它几乎必须从头开始。 此外，它是很好的 jquery 实践。 代码可以在这里找到：

http://jsfiddle.net/sfullman/vh0xq6s1/4/

只需单击任何浅灰色方块，就会出现菜单。 但是，单击一次将使其显示并再次将其隐藏，然后第三次，第四次等它继续向下移动（例如尝试第一行，第三个正方形）。

谁能解释一下如何解决这个问题？

这是html：

<div id="templateMenuRoot" style="display:none;">
    <div class="container">
        content here content here content here content here<br>
        my data: <span id="data"></span>
    </div>
</div>
<!-- here is a row of buttons that are all menuable -->
<div class="menuWrap cf">
<div class="button" id="button-1">
</div>
<div class="button" id="button-2">
</div>
<div class="button" id="button-3">
</div>
</div>
<!-- another row.. -->
<div class="menuWrap cf">
<div class="button" id="button-4">
</div>
<div class="button" id="button-5">
</div>
<div class="button" id="button-6">
</div>
</div>

和这里的js：

$(document).ready(function(){
    $('.button').click(function(e){
        var id=$(this).attr('id');
        if(!$('#templateMenuRoot').data('encounter'))$('#templateMenuRoot').data('encounter','');
        if($('#templateMenuRoot').is(':hidden') ||     $('#templateMenuRoot').data('encounter')!=id){
            $('#templateMenuRoot').data('encounter',id);
        $('#data').html(id);
            $('#templateMenuRoot').position({
                at: "right bottom+2",
                my: "right top",
                collision: 'fit',
                of: $(this)
            });
            $('#templateMenuRoot').fadeIn(400);                         
        }else{
            $('#templateMenuRoot').fadeOut(400);
        }
    });
});

Answer 1

这是一个老问题，但解决方案可能对某人有所帮助。 只需像这样重置元素的位置：

$('#templateMenuRoot').css({left:0, top: 0});

在调用 position() 函数之前。

小提琴

Answer 2

在$('#templateMenuRoot').fadeIn(400); 添加：

$('#templateMenuRoot').position({
    at: "right bottom + 2",
    my: "right top",
    collision: 'fit',
    of: $(this)
});

这将重置位置。