Question

link这应该很简单，因为我已经95％完成并正常工作。我遇到的问题是弹出窗口会弹到您单击元素旁边的位置旁边。所以，如果我点击＆＃34; L＆＃34;在下面的示例中 - popover涵盖了＆＃34; nk 1＆＃34;。我希望它紧挨着1并且也尊重它的高度位置。单击元素的顶部，中间或底部也会改变定位。

这是一个小提琴，可以显示它的实际效果 - https://jsfiddle.net/pfcsc93t/2/

<div class="popover-link"><a link that toggles div display>Link 1</a></div>
<div class="popover-link"><a link that toggles div display>Link 2</a></div>
<div class="popover-link"><a link that toggles div display>Link 3</a></div>
etc...

具有基于点击链接的动态内容Feed的Popover - 一次只存在一个：

<div id="popover">popover content</div>

当前的jQuery：

$( ".popover-link").click( function(event) {
$("#popover").removeClass('hide').css( {position:"absolute", top:event.pageY, left: event.pageX});
});

Answer 1

您需要获取所点击元素的偏移量，而不是使用鼠标x和y位置：

$( ".popover-link a").click( function(event) {
    var pos = $(this).offset();
    $("#popover").removeClass('hide').offset({ top:pos.top, left:pos.left + $(this).width()});
});

请注意，点击附加到锚元素（选择器.popover-link a），否则this将指向div并使用其宽度而不是锚/文本宽度。

Fiddle

像工具提示一样显示Div - Div需要在Click元素旁边定位

1 个答案: