Question

我正在尝试使用jQuery将div显示在另一个div的右侧。

我的解决方案基于this answer，使用position:absolute，并在jQuery中获取触发器元素的位置，并相应地定位弹出窗口。

你可以看到我到目前为止所做的JSFiddle的结果：Result / Source。

问题是，因为popover div使用position:absolute，如果我调整页面大小，或者滚动条出现/消失 - 弹出窗口会与触发器div错位。

如何让popover div粘贴到触发器div的右侧？

Answer 1

不是依赖于jQuery，而是通过使两个元素成为内联元素，强制它们触摸，并将容器的CSS设置为white-space: nowrap，而不是在CSS中将两个元素粘在一起。

HTML：

<div id="main">
    <p>If the draw is popped out, and you resize the page, it breaks, because it has position:absolute</p>
    <div id="clickable">
        <div id="trigger">
            <span>Click here - click away to hide</span>
        </div><div id="pop">
            <span>Now Resize Page</span>
        </div>
    </div>
</div>

请注意</div><div id="pop">不是拼写错误。要强制内联元素触摸，您需要删除标记中的所有空格。

CSS：

#main {
    width:300px;
    margin:50% auto;
    margin-top:0;
    margin-bottom:0;
    background-color:#EEE;
    padding:10px;
}
#clickable { white-space: nowrap; }

#trigger {
    background-color: #FFF;
    width: 100%; 
    border: 4px solid #ddd;
    display: inline-block; }
#trigger span { margin: 5px; display: block; }

#pop {
    background-color: #333;
    color: #EEE;
    height: 38px;
    opacity: 0;
    display: none; }
#pop span { 
    margin: 10px; 
    display: block; }

JS：

$('#trigger').click(function(event) {
    event.stopPropagation();
    var width = $(this).outerWidth();
    var offset = $(this).offset();
    var top = (offset.top+4)+'px';
    var left = (offset.left+width)+'px';
    $('#pop').css({
        'top' : top,
        'left' : left,
        'display' : 'inline-block',
        'opacity' : 0,
        'width' : 0
    }).animate({
        'width' : '140px',
        'opacity' : 1
    });
});

$('html').click(function(event) {
    if (!($(event.target).closest('#pop').length)) {
        $('#pop').animate({'width':0,'opacity':0},500,
                           function() {
            $(this).hide();
        });
    }
});

预览：http://jsfiddle.net/Wexcode/4kg2W/3/

Answer 2

将触发器div放置在position：relative和其中的popover位置：absolute，这样，popover将具有绝对位置，但始终相对于触发器div。

Answer 3

当浏览器调整大小时，可以调整定位：

$(window).resize(function(){
    $("#trigger").trigger('click');
});

Answer 4

你可以使用位置属性

<div style="position: absolute;right:-10px ;top:0"></div>

让div坚持到其他div的一边

4 个答案: