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（）函数之前。

fiddle

Answer 2

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

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

这会重置位置。

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

2 个答案: