javascript - 如何使展开幻灯片始终在 div 下

Question

如何使 outside div 始终位于当前 item div 之下。代码工作正常，但如果它有两行，如下图所示。

如果我单击 box6 或 box7，外部 div 将位于顶部。有没有办法让 outside div 动态改变位置？

<div class="container">
    <div class="item" data-content="1">1
    </div>
    <div class="item" data-content="2">2
    </div>
    <div class="item" data-content="3">3
    </div>
       <div class="outside">
       </div>
</div>



.outside {
    background:yellow;
    background: #222222;
    float: left;
    display: none;
    position: absolute;
    top:80px;
    width:100%;
    color:white;
    font-size:20px;
    height: 300px;
}

在线 sample http://jsfiddle.net/nm3Y4/

非常感谢您的回答和您的宝贵时间。我想我没有说清楚，所以我想实现的是，如果你点击 box1，应该如下图所示

当点击 box6 或 box7 时应该如下所示

所以这意味着 outside 当前 item div

再次感谢

Answer 1

您可以根据 .item 的 height 更改绝对定位的 .outside 元素的 top 属性的值 框和当前点击项的顶部偏移:

$('.item').click(function(event) {
    var $this = $(this);
    var contentNumber = $this.data("content");

    $('.active').removeClass('active');
    $this.addClass("active");

    $('.content').hide();
    $('.content'+contentNumber).show();
    $('.outside')
        .css('top', $(this).offset().top + $(this).height() + 'px')
        .slideDown();     
});

UPDATED DEMO .

作为旁注:最好将.outside 元素放置在相对于.container 而不是初始包含 block 的位置。

.container {
     /* Create a containing block for the absolutely positioned elements */
    position: relative;
}

还有 float: left; 声明对于 .outside 来说是多余的，因为它是绝对定位的。

---

根据您的更新，您可以相对 定位并添加top 属性以定位items(它们的top offset 高于当前点击的item)当点击事件被触发时:

.item {
    /* other styles here... */
    float:left;
    position: relative; /* Position the items relatively */
}

$('.item').click(function(event) {
    var $this = $(this);
    // ...
    $('.item').filter(function() {
        return $(this).offset().top > $this.offset().top;
    }).css('top', $('.outside').height() + 'px');
    // ...   
});

然后在 .outside 关闭时重置他们的位置:

$('.close').click(function(){
    $('.item').css('top', '0'); // reset the top property/value
    $('.outside').slideUp();
    $('.active').removeClass('active');
});

UPDATED DEMO .