2

これが私のフィドルです：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をクリックしてコントロールパネルを閉じます

2回目にクリックすると、コントロールパネルが別の場所に表示されます

再現する方法

フィドルに行く

  • 設定アイコンを初めてクリックする
  • Xをクリックしてドロップダウンするコントロールパネルを閉じます
  • 設定アイコンをもう一度クリックします
  • 別の場所にポップアップするコントロールパネルを参照してください
4

2 に答える 2

4

コントロールパネルを閉じたら、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();
});
于 2013-03-26T21:13:04.010 に答える
0

jquery uiは非表示要素への位置をサポートしていないため、表示して配置する必要があります。

$('.settings-icon').click(function(){
  $('#control-panel').show().position({
    of: $(this),
    my: 'left top',
    at: 'left top'
   });
});
于 2014-11-20T15:00:51.550 に答える