如何放大屏幕周围的元素？

Question

我正在尝试在两列中创建一组元素，当您单击它时，它应该展开并将所有其他元素推出。就像从A到B一样。

A B

我已经明确创建了两列然后填充它们。单击左列中的元素时，它会展开，将其下方的内容向下推，并且右侧的列应该向右移动，以便在屏幕外部分隐藏。问题是上面的元素没有被推高，右列被推到左列下方，然后向右推。 您可以在此处查看结果JSFiddle。

这很奇怪，因为右列开始向右移动，然后向下移动，然后向右移动。如果我没有明确地将正确的列设置为left: 270px;，则只会将其推到下方。我试图通过设置top: 5px;锁定它的位置，但它一直被强行关闭。如何让元素按照我的要求移动？

HTML：

<div class="container">
    <span class="col left">
        <div class="elem">x</div>
        <div class="elem">x</div>
        <div class="elem">x</div>
    </span>
    <span class="col right">
        <div class="elem">x</div>
        <div class="elem">x</div>
        <div class="elem">x</div>
    </span>
</div>

CSS：

.container {
    position: absolute;
    background-color: red;
    height: 400px;
    width: 330px;
    overflow: hidden;
}

.elem {
    height: 60px;
    width: 150px;
    background-color: yellow;
    margin: 5px 5px;
    position: relative;
    transition: all 2s ease;    
}
.col{
    position: relative;
    display: inline-block;
    transition: all 2s ease;
}
.expand {
    height: 100px;
    width: 200px;
    margin: 10px 10px;
}
.push{
    left: 270px;
}

JS：

 $(".elem").click(function () {
        $(this).addClass("expand");
        $(".right").addClass("push");
    });

Answer 1

试一试：http://jsfiddle.net/RJ8Q3/12/

我删除了.push css，添加了white-space:nowrap;，添加了vertical-align:top;，将类.WithLarge添加到容器中，并添加了margin-top:-20px;。

Margin-top解决了转换，is(":first-child")解决了点击第一个元素的问题。

的Javascript

$(".elem").click(function () {
    $(this).toggleClass("expand");
    if (!$(this).is(":first-child"))
        $(this).parent().toggleClass("WithLarge");
});

CSS

.container {
    position: absolute;
    background-color: red;
    height: 400px;
    width: 330px;
    overflow: hidden;
    white-space:nowrap;
}

.col{
    position: relative;
    display: inline-block;
    transition: all 2s ease;
    vertical-align: top;
}
.WithLarge{
    margin-top:-20px;  
}

Answer 2

如果你想让正确的元素向右移动而不向下移动，请执行以下操作：

CSS

.col {
 position:absolute;
}
.right {
    left:170px;
}

fiddle

Answer 3

简化为：http://jsfiddle.net/TrueBlueAussie/RJ8Q3/11/

$(".elem").click(function () {
    var $this = $(this);
    $this.addClass("expand").parent().children().first().css({"margin-top": -10 * $this.index()-1});
    $(".right").addClass("push");
});

*注意：您可能需要调整计算以确保第一个保证金符合您的预期。

旧版本：尝试这样的事情：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/RJ8Q3/8/

$(".elem").click(function () {
    var $prior = $(this).addClass("expand").prevAll();
    $(this).parent().children().first().css({"margin-top": -10 * $prior.length});
    $(".right").addClass("push");
});

我知道这可以简化，但我很匆忙。

$prior.first()没有选择我预期的项目（不确定原因），但这个项目有效。