使用JQuery UI第二次定位元素'；s位置不起作用

这是我的小提琴：

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>

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面板）

我所看到的：

我第一次点击img时，它工作正常

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

第二次单击时，控制面板将显示在其他位置

如何重新编程

玩弄

• 第一次单击设置图标
• 通过单击X来关闭下拉的控制面板
• 再次单击设置图标
• 请参见其他地方弹出的控制面板

---

关闭控制面板后，只需将其恢复到0，0即可。这是最新的小提琴

---

您只需在控制面板关闭后将其恢复到0，0。这是最新的小提琴

---

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

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

---

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

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

---

这是个好主意。。。但是，它不会处理的情况下，我有多个设置图标分散在页面上，并希望显示控制面板周围的那些。。。例如：啊，没有意识到你会有多个图标，我更新了这个例子和小提琴的一些应该工作。真棒。。。作品只是好奇而已。。。为什么我需要重置控制面板div的顶部和左侧…因为position方法将控制面板的左侧和顶部设置为相对于其当前左侧和顶部的偏移量，所以如果您不清除它，它将以control-panel.width和control-panel.height的增量继续向下和向右移动。这是个好主意。。。但是，它不会处理的情况下，我有多个设置图标分散在页面上，并希望显示控制面板周围的那些。。。例如：啊，没有意识到你会有多个图标，我更新了这个例子和小提琴的一些应该工作。真棒。。。作品只是好奇而已。。。为什么我需要重置控制面板div的顶部和左侧…因为位置方法是将控制面板的左侧和顶部设置为相对于其当前左侧和顶部的偏移量，因此如果不清除它，它将以control-panel.width&control-panel.height的增量继续向下和向右移动。

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