jquery ui position( )会在每次单击时继续向下移动菜单
jquery ui position( )会在每次单击时继续向下移动菜单
提问于 2014-11-12 10:18:12
我正在开发一个弹出菜单，几乎必须从头开始，因为它将进入应用程序。此外，这也是一个很好的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);
}
});
});回答 2
Stack Overflow用户
发布于 2019-12-06 20:26:30
这是一个古老的问题，但解决方案可能会对某些人有所帮助。只需重置元素的位置，如下所示：
$('#templateMenuRoot').css({left:0, top: 0});在调用position()函数之前。
fiddle
Stack Overflow用户
发布于 2014-11-12 10:53:34
在$('#templateMenuRoot').fadeIn(400);下添加：
$('#templateMenuRoot').position({
at: "right bottom + 2",
my: "right top",
collision: 'fit',
of: $(this)
});这将重置位置。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26878144
复制相关文章
相似问题
腾讯云开发者
