让div坚持到其他div的一边

Question

我正在尝试使用jQuery将div显示为滑出另一个div的右侧.

我通过在jQuery中使用和获取触发器元素的位置,并相应地定位弹出窗口,将我的解决方案基于此答案position:absolute.

你可以看到我到目前为止所做的JSFiddle的结果:结果/来源.

问题是,因为popover div使用position:absolute,如果我调整页面大小,或滚动条出现/消失 - 弹出窗口与触发器div不一致.

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

Answer 1

而不是依靠jQuery的这一点,你可以让两个元素粘在一起的CSS,使它们的内联元素,迫使他们接触,并设置容器的CSS white-space: nowrap.

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/