这是我的 fiddle : 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();
});
我正在尝试做的事情: 我有一个设置图像,单击该图像后,它会在该图像周围放置一个绝对定位的 div(称为控制面板)。
我所看到的:
第一次点击图片时效果很好
我通过单击右上角的 X 关闭控制面板
第二次点击控制面板时显示在其他地方
如何重现
转到 fiddle
- 首次点击设置图标
- 关闭通过单击 X 下拉的控制面板
- 再次点击设置图标
- 看到控制面板在其他地方弹出
最佳答案
关闭后只需将控制面板调回0, 0即可。这是更新的 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 - 使用 JQuery UI 位置第二次定位元素无法按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15647468/