使用 JQuery UI 位置第二次定位元素无法按预期工作答案

【问题标题】：Positioning the element second time using JQuery UI's position does not work as expcted使用 JQuery UI 位置第二次定位元素无法按预期工作
【发布时间】：2014-11-20 23:15:56
【问题描述】：

这是我的小提琴： http://jsfiddle.net/Ya3w7/2/

HTML：

<img src="http://cdn.tacky.me/m/static/settings16.png" class="settings-icon"/>

<div id="control-panel">
    <img src="http://cdn.tacky.me/m/static/settings16.png" />
    <a href="#" style="float:right" id="close-cp">X</a>
    <div class="link_container"><a href="#">Show Profile</a></div>
</div>

CSS：

.settings-icon 
{
    margin: 100px;
    cursor: pointer;
}

#control-panel
{
    position: absolute;
    height: auto;
    width: auto;
    top: 0;
    left: 0;
    background-color: #fff;
    font-family: Arial, sans-serif;
    display: none;
    z-index: 4;
}

JavaScript：

$('.settings-icon').click(function(){
    $('#control-panel').position({
        of: $('.settings-icon'),
        my: 'left top',
        at: 'left top'
    });
    $('#control-panel').show();
});

$('#close-cp').click(function(event){
    event.preventDefault();
    $('#control-panel').hide();
});

我想要做什么： 我有一个设置图像，单击它会在此 img 周围放置一个绝对定位的 div（称为 contgrol-panel）。

我所看到的：

我第一次点击img时效果很好

我通过点击右上角的 X 来关闭控制面板

我第二次点击控制面板时显示在别处

如何复制

去小提琴

第一次点击设置图标
点击 X 关闭下拉的控制面板
再次点击设置图标
查看在其他地方弹出的控制面板

【问题讨论】：

标签： jquery positioning

【解决方案1】：

你只需要在控制面板关闭后将其恢复为0、0即可。这是更新的小提琴http://jsfiddle.net/Ya3w7/3/。

$('.settings-icon').click(function(){
    $('#control-panel').position({
        of: $(this),
        my: 'left top',
        at: 'left top'
    });
    $('#control-panel').show();
});

$('#close-cp').click(function(event){
    event.preventDefault();
    $('#control-panel').css({top: '0px', left: '0px'}).hide();
});

【讨论】：

这是个好主意...但是它无法处理我在页面上散布多个设置图标并希望在这些图标周围显示控制面板的情况...例如：jsfiddle.net/Ya3w7/2
啊，没想到你会有多个图标，我更新了示例和小提琴，添加了一些应该可以工作的东西。
太棒了！！ ...工作...只是好奇...为什么我需要为我的控制面板div重置顶部和左侧...
因为 position 方法是将控制面板的 left & top 设置为相对于它当前 left & top 的偏移量，所以如果你不清除它，它会一直向下移动并向右以 control-panel.width 和 control-panel.height 为增量。

【解决方案2】：

因为jquery ui不支持对隐藏元素定位，所以必须显示和定位。

$('.settings-icon').click(function(){
  $('#control-panel').show().position({
    of: $(this),
    my: 'left top',
    at: 'left top'
   });
});

【讨论】：