使用JQuery UI的位置第二次定位元素不起作用 [英] Positioning the element second time using JQuery UI's position does not work as expcted

问题描述

这是我的小提琴：
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：

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();
});

我想做的事情：
我有一个设置图片，点击它定位一个绝对定位的div（称为contgrol-panel）围绕这个img。

What I am trying to do: I have a settings image, upon clicking which it positions an absolutely positioned div (called contgrol-panel) around this img.

我看到的内容：

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

First time I click on the img it works fine

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

I dismiss the control panel by clicking on X on the top right corner

第二次点击控制面板显示在其他地方

Second time I click the control panel shows up somewhere else

如何Repro

转到小提琴

• 点击设置图标第一次


• 通过点击X来关闭掉落的控制面板


• 再次单击设置图标


• 看到控制面板弹出其他地方

• Click on the settings icon for the first time
• Dismiss the control panel which drops down by clicking on the X
• Click on the settings icon once again
• See control panel popping up somewhere else

推荐答案

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

You just need to put the control panel back to 0, 0 after it's closed. Here's the updated fiddle 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();
});

这篇关于使用JQuery UI的位置第二次定位元素不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！